Skip to content

Commit

Permalink
feat: Upgrade timeline to v3
Browse files Browse the repository at this point in the history
Signed-off-by: Gordon Smith <GordonJSmith@gmail.com>
  • Loading branch information
GordonSmith committed Nov 12, 2024
1 parent 397c707 commit 0292895
Show file tree
Hide file tree
Showing 18 changed files with 467 additions and 156 deletions.
27 changes: 26 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
"packages/preact-shim",
"packages/react",
"xpackages/requirejs-shim",
"xpackages/timeline",
"packages/timeline",
"packages/tree",
"packages/util",
"xcomponents/*",
Expand Down
47 changes: 47 additions & 0 deletions packages/timeline/.vscode/launch.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
{
"version": "0.2.0",
"configurations": [
{
"name": "test-browser",
"type": "msedge",
"request": "launch",
"url": "http://localhost:8888",
"webRoot": "${workspaceFolder}",
"outFiles": [
"${workspaceFolder}/**/*.js",
"!**/node_modules/**"
],
},
{
"name": "test-node",
"type": "node",
"request": "launch",
"runtimeArgs": [
"run-script",
"test-node"
],
"runtimeExecutable": "npm",
"skipFiles": [
"<node_internals>/**"
],
"outFiles": [
"${workspaceFolder}/**/*.js",
"!**/node_modules/**"
],
},
{
"name": "index.html",
"request": "launch",
"type": "msedge",
"url": "file:///${workspaceFolder}/index.html",
"runtimeArgs": [
"--disable-web-security"
],
"webRoot": "${workspaceFolder}",
"outFiles": [
"${workspaceFolder}/**/*.js",
"!**/node_modules/**"
]
}
]
}
34 changes: 25 additions & 9 deletions packages/timeline/.vscode/tasks.json
Original file line number Diff line number Diff line change
@@ -1,20 +1,36 @@
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "gen-types-watch",
"type": "npm",
"script": "compile-umd-watch",
"group": {
"kind": "build",
"isDefault": true
},
"script": "gen-types-watch",
"problemMatcher": [
"$tsc-watch"
],
"label": "npm: compile-umd-watch",
"detail": "tsc --module umd --outDir ./lib-umd --watch"
"presentation": {
"group": "group-build"
}
},
{
"label": "bundle-watch",
"type": "npm",
"script": "bundle-watch",
"problemMatcher": [],
"presentation": {
"group": "group-build"
}
},
{
"label": "build",
"dependsOn": [
"gen-types-watch",
"bundle-watch",
],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
29 changes: 29 additions & 0 deletions packages/timeline/esbuild.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { browserTpl } from "@hpcc-js/esbuild-plugins";
import pkg from "./package.json" with { type: "json" };

// config ---
await Promise.all([
browserTpl("src/index.ts", "dist/index", {
keepNames: true,
alias: {
"d3-array": "@hpcc-js/common",
"d3-brush": "@hpcc-js/common",
"d3-collection": "@hpcc-js/common",
"d3-color": "@hpcc-js/common",
"d3-dispatch": "@hpcc-js/common",
"d3-drag": "@hpcc-js/common",
"d3-dsv": "@hpcc-js/common",
"d3-ease": "@hpcc-js/common",
"d3-format": "@hpcc-js/common",
"d3-interpolate": "@hpcc-js/common",
"d3-scale": "@hpcc-js/common",
"d3-selection": "@hpcc-js/common",
"d3-time-format": "@hpcc-js/common",
"d3-transition": "@hpcc-js/common",
"d3-zoom": "@hpcc-js/common"
},
external: [
...Object.keys(pkg.dependencies),
]
})
]);
108 changes: 108 additions & 0 deletions packages/timeline/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<!DOCTYPE html>
<html>

<head>
<title>Home</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}

h1 {
text-align: center;
margin-top: 50px;
}

#placeholder {
width: 100%;
height: 500px;
background-color: #fff;
margin-top: 20px;
}
</style>
<script type="importmap">
{
"imports": {
"@observablehq/runtime": "https://cdn.jsdelivr.net/npm/@observablehq/runtime@5.9.9/dist/runtime.js",

"@hpcc-js/util": "../util/dist/index.js",
"@hpcc-js/common": "../common/dist/index.js",
"@hpcc-js/api": "../api/dist/index.js",
"@hpcc-js/chart": "../chart/dist/index.js",
"@hpcc-js/codemirror": "../codemirror/dist/index.js",
"@hpcc-js/comms": "../comms/dist/index.js",
"@hpcc-js/dgrid": "../dgrid/dist/index.js",
"@hpcc-js/react": "../react/dist/index.js",
"@hpcc-js/html": "../html/dist/index.js",
"@hpcc-js/graph": "../graph/dist/index.js",
"@hpcc-js/layout": "../layout/dist/index.js",
"@hpcc-js/timeline": "../timeline/dist/index.js",
"@hpcc-js/observablehq-compiler": "../observablehq-compiler/dist/index.js"
}
}
</script>
<link rel="stylesheet" href="./dist/index.css">
</head>

<body onresize="doResize()">
<h1>ESM Quick Test</h1>
<div id="placeholder"></div>
<script type="module">
import { ReactTimelineSeries } from "@hpcc-js/timeline";
import { LabelledRect } from "@hpcc-js/react";

import "@hpcc-js/common/dist/index.css";
import "@hpcc-js/common/font-awesome/css/font-awesome.min.css";
import "@hpcc-js/chart/dist/index.css";
import "@hpcc-js/dgrid2/dist/index.css";

window.__widget = new ReactTimelineSeries()
.target("placeholder")
.rangeRenderer(LabelledRect)
.columns(["Label", "start", "end", "evenOdd"])
.seriesColumn("evenOdd")
.data(random_datetime_ranges(10).map((n, i) => {
n.push(i % 2);
return n;
}))
.timePattern("%Y-%m-%dT%H:%M:%S.%LZ")
.render()
;

window.__widget.tooltip()
.tooltipWidth(200)
.tooltipHeight(20)
.tooltipHTML(d => {
return `<b>${d[0]}</b>`;
});

function random_datetime_string() {
const yyyy = 2004 + Math.floor(Math.random() * 2);
const mm = 1 + Math.floor(Math.random() * 12);
const dd = 1 + Math.floor(Math.random() * 28);
const hh = 1 + Math.floor(Math.random() * 23);
const min = 1 + Math.floor(Math.random() * 59);
const sec = 0 + Math.floor(Math.random() * 59);
return `${yyyy}-${mm < 10 ? "0" + mm : mm}-${dd < 10 ? "0" + dd : dd}T${hh < 10 ? "0" + hh : hh}:${min < 10 ? "0" + min : min}:${sec < 10 ? "0" + sec : sec}.0Z`;
}

function random_datetime_ranges(n) {
return Array(n).fill("").map((row, row_idx) => {
const d1 = random_datetime_string();
const d2 = random_datetime_string();
return new Date(d1) - new Date(d2) > 0 ? [`Random Range #${row_idx}`, d2, d1] : [`Random Range #${row_idx}`, d1, d2];
});
}

</script>
<script>
function doResize() {
window.__widget?.resize()?.render();
}
</script>
</body>

</html>
70 changes: 34 additions & 36 deletions packages/timeline/package.json
Original file line number Diff line number Diff line change
@@ -1,58 +1,56 @@
{
"name": "@hpcc-js/timeline",
"version": "2.54.0",
"version": "3.0.0",
"description": "hpcc-js - Viz Timeline",
"main": "dist/index.js",
"module": "dist/index.es6",
"unpkg": "dist/index.min.js",
"jsdelivr": "dist/index.min.js",
"types": "types/index.d.ts",
"typesVersions": {
"<3.8": {
"*": [
"types-3.4/index.d.ts"
]
}
"type": "module",
"exports": {
".": {
"types": "./types/index.d.ts",
"default": "./dist/index.js"
},
"./dist/*": "./dist/*"
},
"module": "./dist/index.js",
"browser": "./dist/index.js",
"types": "./types/index.d.ts",
"files": [
"dist/*",
"src/*",
"types/*",
"types-3.4/*",
"src/*"
"font-awesome/**/*"
],
"scripts": {
"clean": "rimraf --glob lib* types dist *.tsbuildinfo",
"compile-es6": "tsc --module es6 --outDir ./lib-es6",
"compile-es6-watch": "npm run compile-es6 -- -w",
"compile-umd": "tsc --module umd --outDir ./lib-umd",
"compile-umd-watch": "npm run compile-umd -- -w",
"bundle": "rollup -c",
"bundle-watch": "npm run bundle -- -w",
"minimize": "terser dist/index.js -c -m --source-map \"content='dist/index.js.map',url='index.min.js.map'\" -o dist/index.min.js",
"gen-legacy-types": "downlevel-dts ./types ./types-3.4",
"build": "npm run compile-es6 && npm run bundle",
"watch": "npm-run-all compile-es6 -p compile-es6-watch bundle-watch",
"clean": "rimraf --glob lib* types dist *.tsbuildinfo .turbo",
"bundle": "node esbuild.js",
"bundle-watch": "npm run bundle -- --development --watch",
"gen-types": "tsc --project tsconfig.json",
"gen-types-watch": "npm run gen-types -- --watch",
"build": "run-p gen-types bundle",
"stamp": "node ../../node_modules/@hpcc-js/bundle/src/stamp.js",
"lint": "eslint ./src",
"lint-fix": "eslint --fix src/**/*.ts",
"docs": "typedoc --options tdoptions.json .",
"update": "npx --yes npm-check-updates -u -t minor"
"test-browser": "vitest run --project browser",
"test": "vitest run",
"coverage": "vitest run --coverage",
"update": "npx --yes npm-check-updates -u -t minor",
"update-major": "npx --yes npm-check-updates -u"
},
"dependencies": {
"@hpcc-js/api": "^2.14.0",
"@hpcc-js/chart": "^2.86.0",
"@hpcc-js/common": "^2.73.0",
"@hpcc-js/html": "^2.44.0",
"@hpcc-js/layout": "^2.51.0",
"@hpcc-js/react": "^2.55.0"
"@hpcc-js/api": "^3.0.0",
"@hpcc-js/chart": "^3.0.0",
"@hpcc-js/common": "^3.0.0",
"@hpcc-js/html": "^3.0.0",
"@hpcc-js/layout": "^3.0.0",
"@hpcc-js/react": "^3.0.0"
},
"devDependencies": {
"@hpcc-js/bundle": "^2.12.0",
"@hpcc-js/esbuild-plugins": "^1.2.0",
"d3-array": "^1",
"d3-scale": "^1",
"d3-selection": "^1",
"d3-time-format": "^2",
"d3-zoom": "^1",
"tslib": "2.7.0"
"d3-zoom": "^1"
},
"repository": {
"type": "git",
Expand All @@ -65,4 +63,4 @@
"url": "https://github.com/hpcc-systems/Visualization/issues"
},
"homepage": "https://github.com/hpcc-systems/Visualization"
}
}
Loading

0 comments on commit 0292895

Please sign in to comment.