Compare commits

...

5 Commits

  1. 23
      package.json
  2. 0
      packages/line-pod/LICENSE
  3. 0
      packages/line-pod/build/webpack.base.conf.js
  4. 0
      packages/line-pod/build/webpack.dev.conf.js
  5. 0
      packages/line-pod/build/webpack.prod.conf.js
  6. 0
      packages/line-pod/examples/demo.html
  7. 0
      packages/line-pod/examples/demo_live.html
  8. 0
      packages/line-pod/examples/demo_vertical.html
  9. 33
      packages/line-pod/package.json
  10. 0
      packages/line-pod/src/index.ts
  11. 0
      packages/line-pod/src/models/line_series.ts
  12. 0
      packages/line-pod/src/types.ts
  13. 0
      packages/line-pod/tsconfig.json
  14. 27
      packages/react/README.md
  15. 13
      packages/react/index.html
  16. 126
      packages/react/lib/components/ChartwerkLinePod.tsx
  17. 1
      packages/react/lib/main.ts
  18. 36
      packages/react/package.json
  19. 1
      packages/react/public/vite.svg
  20. 36
      packages/react/src/App.tsx
  21. 10
      packages/react/src/main.tsx
  22. 1
      packages/react/src/vite-env.d.ts
  23. 6
      packages/react/tsconfig-build.json
  24. 25
      packages/react/tsconfig.json
  25. 10
      packages/react/tsconfig.node.json
  26. 29
      packages/react/vite.config.ts
  27. 3195
      yarn.lock

23
package.json

@ -2,32 +2,15 @@
"name": "@chartwerk/line-pod", "name": "@chartwerk/line-pod",
"version": "0.6.9", "version": "0.6.9",
"description": "Chartwerk line chart", "description": "Chartwerk line chart",
"main": "dist/index.js", "workspaces": [
"files": [ "packages/line-pod",
"/dist" "packages/react"
], ],
"scripts": {
"build": "webpack --config build/webpack.prod.conf.js && webpack --config build/webpack.dev.conf.js",
"dev": "webpack --watch --config build/webpack.dev.conf.js",
"test": "echo \"Error: no test specified\" && exit 1",
"update-core": "yarn up @chartwerk/core && yarn up @chartwerk/core@latest"
},
"repository": { "repository": {
"type": "git", "type": "git",
"url": "http://code.corpglory.net/chartwerk/line-pod.git" "url": "http://code.corpglory.net/chartwerk/line-pod.git"
}, },
"author": "CorpGlory", "author": "CorpGlory",
"license": "ISC", "license": "ISC",
"dependencies": {
"@chartwerk/core": "latest"
},
"devDependencies": {
"css-loader": "^6.8.1",
"style-loader": "^3.3.3",
"ts-loader": "^9.4.3",
"typescript": "^5.1.3",
"webpack": "^5.87.0",
"webpack-cli": "^5.1.4"
},
"packageManager": "yarn@3.2.1" "packageManager": "yarn@3.2.1"
} }

0
LICENSE → packages/line-pod/LICENSE

0
build/webpack.base.conf.js → packages/line-pod/build/webpack.base.conf.js

0
build/webpack.dev.conf.js → packages/line-pod/build/webpack.dev.conf.js

0
build/webpack.prod.conf.js → packages/line-pod/build/webpack.prod.conf.js

0
examples/demo.html → packages/line-pod/examples/demo.html

0
examples/demo_live.html → packages/line-pod/examples/demo_live.html

0
examples/demo_vertical.html → packages/line-pod/examples/demo_vertical.html

33
packages/line-pod/package.json

@ -0,0 +1,33 @@
{
"name": "line-pod",
"version": "0.6.9",
"description": "Chartwerk line chart",
"main": "dist/index.js",
"files": [
"/dist"
],
"scripts": {
"build": "webpack --config build/webpack.prod.conf.js && webpack --config build/webpack.dev.conf.js",
"dev": "webpack --watch --config build/webpack.dev.conf.js",
"test": "echo \"Error: no test specified\" && exit 1",
"update-core": "yarn up @chartwerk/core && yarn up @chartwerk/core@latest"
},
"repository": {
"type": "git",
"url": "https://gitlab.com/chartwerk/line-pod.git"
},
"author": "CorpGlory",
"license": "ISC",
"dependencies": {
"@chartwerk/core": "latest"
},
"devDependencies": {
"css-loader": "^6.8.1",
"style-loader": "^3.3.3",
"ts-loader": "^9.4.3",
"typescript": "^5.1.3",
"webpack": "^5.87.0",
"webpack-cli": "^5.1.4"
},
"packageManager": "yarn@3.2.1"
}

0
src/index.ts → packages/line-pod/src/index.ts

0
src/models/line_series.ts → packages/line-pod/src/models/line_series.ts

0
src/types.ts → packages/line-pod/src/types.ts

0
tsconfig.json → packages/line-pod/tsconfig.json

27
packages/react/README.md

@ -0,0 +1,27 @@
# React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
## Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Configure the top-level `parserOptions` property like this:
```js
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
```
- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

13
packages/react/index.html

@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Line-Pod Demo</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

126
packages/react/lib/components/ChartwerkLinePod.tsx

@ -0,0 +1,126 @@
import type { LineTimeSerie, LineOptions } from 'line-pod';
import { LinePod } from 'line-pod';
// import { AxisRange } from '@chartwerk/core/dist/types';
import { useEffect, useRef, useState, PropsWithChildren, forwardRef } from 'react';
import * as _ from 'lodash';
export type AxisRange = [number, number] | undefined;
export type ChartwerkLinePodProps = {
id: string;
series: LineTimeSerie[];
options: LineOptions;
className?: string;
// TODO: callback types should be exported from chartwerk
onZoomIn?: (ranges: AxisRange[]) => void;
onZoomOut?: (centers: { x: number, y: number }) => void;
onMouseMove?: (event: any) => void;
onMouseOut?: () => void;
onLegendClick?: (idx: number) => void,
onPanning?: (event: { ranges: AxisRange[], d3Event: any }) => void;
onPanningEnd?: (ranges: AxisRange[]) => void;
onContextMenu?: (evt: any) => void;
onSharedCrosshairMove?: (evt: any) => void;
onRenderStart?: () => void,
onRenderEnd?: () => void,
}
export const ChartwerkLinePod = forwardRef<HTMLDivElement, PropsWithChildren<ChartwerkLinePodProps>>((props, ref) => {
const [pod, setPod] = useState<LinePod | null>(null);
const [hack, setHack] = useState<number | null>(null);
const chartRef = useRef(null);
const chart = chartRef.current;
useEffect(() => {
// this function will be called on component unmount
return () => {
if (pod === null) {
return;
}
console.log('remove chart');
// @ts-ignore
pod.removeEventListeners();
}
}, []);
useEffect(() => {
if (chart === null) {
return;
}
let eventsCallbacks = _.cloneDeep(props.options.eventsCallbacks || {});
if (props.onZoomIn) {
eventsCallbacks.zoomIn = props.onZoomIn;
}
if (props.onZoomOut) {
eventsCallbacks.zoomOut = props.onZoomOut;
}
if (props.onMouseMove) {
eventsCallbacks.mouseMove = props.onMouseMove;
}
if (props.onMouseOut) {
eventsCallbacks.mouseOut = props.onMouseOut;
}
if (props.onLegendClick) {
eventsCallbacks.onLegendClick = props.onLegendClick;
}
if (props.onPanning) {
eventsCallbacks.panning = props.onPanning;
}
if (props.onPanningEnd) {
eventsCallbacks.panningEnd = props.onPanningEnd;
}
if (props.onContextMenu) {
eventsCallbacks.contextMenu = props.onContextMenu;
}
if (props.onSharedCrosshairMove) {
eventsCallbacks.sharedCrosshairMove = props.onSharedCrosshairMove;
}
if (props.onRenderStart) {
eventsCallbacks.renderStart = props.onRenderStart;
}
if (pod === null) {
console.log('create chart');
const newPod = new LinePod(
// @ts-ignore
chart,
props.series,
{
...props.options,
eventsCallbacks,
}
);
setPod(
newPod
);
console.log('initial chart render');
newPod.render();
} else {
console.log('update chart');
pod.updateData(props.series, {
...props.options,
eventsCallbacks,
});
}
}, [chart, pod, props.id, props.series, props.options]);
// TODO: it's a hack to render the LinePod right after the div appears in DOM
setTimeout(() => {
if (hack === null) {
setHack(1);
}
}, 1);
return (
<div ref={ref}>
<div id={props.id} className={props.className} ref={chartRef}></div>
{props.children}
</div>
);
});

1
packages/react/lib/main.ts

@ -0,0 +1 @@
export { ChartwerkLinePod } from './components/ChartwerkLinePod';

36
packages/react/package.json

@ -0,0 +1,36 @@
{
"name": "react-line-pod",
"version": "0.0.0",
"type": "module",
"main": "dist/react-line-pod.js",
"types": "dist/main.d.ts",
"files": [
"dist"
],
"scripts": {
"dev": "vite",
"build": "tsc --p ./tsconfig-build.json && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/lodash": "^4.14.201",
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"@vitejs/plugin-react": "^4.0.3",
"eslint": "^8.45.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"line-pod": "workspace:^",
"lodash": "^4.17.21",
"typescript": "^5.0.2",
"vite": "^4.4.5",
"vite-plugin-dts": "^3.6.3"
}
}

1
packages/react/public/vite.svg

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

36
packages/react/src/App.tsx

@ -0,0 +1,36 @@
import { ChartwerkLinePod } from '../lib/main';
function App() {
const startTime = 1590590148;
const arrayLength = 20;
const data1 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 40)]);
const data2 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 10)]);
const data3 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 20) + 90]);
const options = {
renderLegend: false, usePanning: false,
axis: {
y: { invert: false, range: [0, 350] },
y1: { isActive: true, range: [0, 10], ticksCount: 8 },
x: { format: 'time' }
},
zoomEvents: {
mouse: { zoom: { isActive: true, orientation: 'horizontal' } },
scroll: { zoom: { isActive: true, orientation: 'horizontal' } }
}
};
const series = [
{ target: 'test1', datapoints: data1, color: 'green', dashArray: '5,3', class: 'first', renderArea: true },
{ target: 'test2', datapoints: data2, color: 'blue', yOrientation: 'right' },
{ target: 'test3', datapoints: data3, color: 'orange' },
];
return (
<>
{/* @ts-ignore */}
<ChartwerkLinePod id="demo" series={series} options={options}></ChartwerkLinePod>
</>
);
}
export default App;

10
packages/react/src/main.tsx

@ -0,0 +1,10 @@
import App from './App.tsx';
import React from 'react';
import ReactDOM from 'react-dom/client';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>
);

1
packages/react/src/vite-env.d.ts vendored

@ -0,0 +1 @@
/// <reference types="vite/client" />

6
packages/react/tsconfig-build.json

@ -0,0 +1,6 @@
{
"extends": "./tsconfig.json",
"include": [
"lib"
]
}

25
packages/react/tsconfig.json

@ -0,0 +1,25 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src", "lib"],
"references": [{ "path": "./tsconfig.node.json" }]
}

10
packages/react/tsconfig.node.json

@ -0,0 +1,10 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}

29
packages/react/vite.config.ts

@ -0,0 +1,29 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import dts from 'vite-plugin-dts';
import { resolve } from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
dts({ include: ['lib'] }),
],
optimizeDeps: {
include: ['line-pod'],
},
build: {
copyPublicDir: false,
lib: {
entry: resolve(__dirname, 'lib/main.ts'),
formats: ['es']
},
rollupOptions: {
external: ['react', 'react/jsx-runtime'],
},
commonjsOptions: {
include: [/line-pod/],
},
}
});

3195
yarn.lock

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save