Browse Source

react wrapper

react-bar-pod
vargburz 10 months ago
parent
commit
f68c41fee5
  1. 9
      build/webpack.base.conf.js
  2. 1
      package.json
  3. 63
      react/ChartwerkBarPod.tsx
  4. 4
      tsconfig.json
  5. 257
      yarn.lock

9
build/webpack.base.conf.js

@ -1,4 +1,5 @@
const path = require('path');
const CopyPlugin = require("copy-webpack-plugin");
function resolve(dir) {
@ -8,7 +9,13 @@ function resolve(dir) {
module.exports = {
context: resolve('src'),
entry: './index.ts',
plugins: [],
plugins: [
new CopyPlugin({
patterns: [
{ from: "../react", to: "react" },
],
})
],
module: {
rules: [
{

1
package.json

@ -22,6 +22,7 @@
"@chartwerk/core": "latest"
},
"devDependencies": {
"copy-webpack-plugin": "^12.0.2",
"css-loader": "^6.8.1",
"style-loader": "^3.3.3",
"ts-loader": "^9.4.3",

63
react/ChartwerkBarPod.tsx

@ -0,0 +1,63 @@
import { BarSerie, BarOptions, BarPod } from '@chartwerk/bar-pod';
import { useEffect, useRef, useState } from 'react';
import _ from 'lodash';
export type ChartwerkBarPodProps = {
id?: string;
series: BarSerie[];
options?: BarOptions;
className?: string;
}
export function ChartwerkBarPod(props: ChartwerkBarPodProps) {
const [pod, setPod] = useState<BarPod | 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; }
// @ts-ignore
pod.removeEventListeners();
}
}, []);
useEffect(() => {
if(chart === null) { return; }
if(pod === null) {
const newPod = new BarPod(
// @ts-ignore
chart,
props.series,
props.options,
);
setPod(newPod);
newPod.render();
} else {
// TODO: actually it's wrong logic with updates
// because it creates new pod anyway
pod.updateData(props.series, props.options);
}
}, [chart, props.id, props.options]);
// TODO: it's a hack to render the BarPod right after the div appears in DOM
setTimeout(() => {
if(hack === null) {
setHack(1);
}
}, 1);
return (
<div id={props.id} className={props.className} ref={chartRef}></div>
);
}
export default ChartwerkBarPod;

4
tsconfig.json

@ -18,5 +18,7 @@
"noImplicitAny": false,
"noUnusedLocals": false,
"baseUrl": "./src"
}
},
"include": ["src/**/*"],
"exclude": ["*.tsx"]
}

257
yarn.lock

@ -10,6 +10,7 @@ __metadata:
resolution: "@chartwerk/bar-pod@workspace:."
dependencies:
"@chartwerk/core": latest
copy-webpack-plugin: ^12.0.2
css-loader: ^6.8.1
style-loader: ^3.3.3
ts-loader: ^9.4.3
@ -88,6 +89,40 @@ __metadata:
languageName: node
linkType: hard
"@nodelib/fs.scandir@npm:2.1.5":
version: 2.1.5
resolution: "@nodelib/fs.scandir@npm:2.1.5"
dependencies:
"@nodelib/fs.stat": 2.0.5
run-parallel: ^1.1.9
checksum: a970d595bd23c66c880e0ef1817791432dbb7acbb8d44b7e7d0e7a22f4521260d4a83f7f9fd61d44fda4610105577f8f58a60718105fb38352baed612fd79e59
languageName: node
linkType: hard
"@nodelib/fs.stat@npm:2.0.5, @nodelib/fs.stat@npm:^2.0.2":
version: 2.0.5
resolution: "@nodelib/fs.stat@npm:2.0.5"
checksum: 012480b5ca9d97bff9261571dbbec7bbc6033f69cc92908bc1ecfad0792361a5a1994bc48674b9ef76419d056a03efadfce5a6cf6dbc0a36559571a7a483f6f0
languageName: node
linkType: hard
"@nodelib/fs.walk@npm:^1.2.3":
version: 1.2.8
resolution: "@nodelib/fs.walk@npm:1.2.8"
dependencies:
"@nodelib/fs.scandir": 2.1.5
fastq: ^1.6.0
checksum: 190c643f156d8f8f277bf2a6078af1ffde1fd43f498f187c2db24d35b4b4b5785c02c7dc52e356497b9a1b65b13edc996de08de0b961c32844364da02986dc53
languageName: node
linkType: hard
"@sindresorhus/merge-streams@npm:^1.0.0":
version: 1.0.0
resolution: "@sindresorhus/merge-streams@npm:1.0.0"
checksum: 453c2a28164113a5ec4fd23ba636e291a4112f6ee9e91cd5476b9a96e0fc9ee5ff40d405fe81bbf284c9773b7ed718a3a0f31df7895a0efd413b1f9775d154fe
languageName: node
linkType: hard
"@types/eslint-scope@npm:^3.7.3":
version: 3.7.7
resolution: "@types/eslint-scope@npm:3.7.7"
@ -115,7 +150,7 @@ __metadata:
languageName: node
linkType: hard
"@types/json-schema@npm:*, @types/json-schema@npm:^7.0.8":
"@types/json-schema@npm:*, @types/json-schema@npm:^7.0.8, @types/json-schema@npm:^7.0.9":
version: 7.0.15
resolution: "@types/json-schema@npm:7.0.15"
checksum: 97ed0cb44d4070aecea772b7b2e2ed971e10c81ec87dd4ecc160322ffa55ff330dace1793489540e3e318d90942064bb697cc0f8989391797792d919737b3b98
@ -347,6 +382,20 @@ __metadata:
languageName: node
linkType: hard
"ajv-formats@npm:^2.1.1":
version: 2.1.1
resolution: "ajv-formats@npm:2.1.1"
dependencies:
ajv: ^8.0.0
peerDependencies:
ajv: ^8.0.0
peerDependenciesMeta:
ajv:
optional: true
checksum: 4a287d937f1ebaad4683249a4c40c0fa3beed30d9ddc0adba04859026a622da0d317851316ea64b3680dc60f5c3c708105ddd5d5db8fe595d9d0207fd19f90b7
languageName: node
linkType: hard
"ajv-keywords@npm:^3.5.2":
version: 3.5.2
resolution: "ajv-keywords@npm:3.5.2"
@ -356,6 +405,17 @@ __metadata:
languageName: node
linkType: hard
"ajv-keywords@npm:^5.1.0":
version: 5.1.0
resolution: "ajv-keywords@npm:5.1.0"
dependencies:
fast-deep-equal: ^3.1.3
peerDependencies:
ajv: ^8.8.2
checksum: c35193940b853119242c6757787f09ecf89a2c19bcd36d03ed1a615e710d19d450cb448bfda407b939aba54b002368c8bff30529cc50a0536a8e10bcce300421
languageName: node
linkType: hard
"ajv@npm:^6.12.5":
version: 6.12.6
resolution: "ajv@npm:6.12.6"
@ -368,6 +428,18 @@ __metadata:
languageName: node
linkType: hard
"ajv@npm:^8.0.0, ajv@npm:^8.9.0":
version: 8.12.0
resolution: "ajv@npm:8.12.0"
dependencies:
fast-deep-equal: ^3.1.1
json-schema-traverse: ^1.0.0
require-from-string: ^2.0.2
uri-js: ^4.2.2
checksum: 4dc13714e316e67537c8b31bc063f99a1d9d9a497eb4bbd55191ac0dcd5e4985bbb71570352ad6f1e76684fb6d790928f96ba3b2d4fd6e10024be9612fe3f001
languageName: node
linkType: hard
"ansi-styles@npm:^4.1.0":
version: 4.3.0
resolution: "ansi-styles@npm:4.3.0"
@ -479,6 +551,22 @@ __metadata:
languageName: node
linkType: hard
"copy-webpack-plugin@npm:^12.0.2":
version: 12.0.2
resolution: "copy-webpack-plugin@npm:12.0.2"
dependencies:
fast-glob: ^3.3.2
glob-parent: ^6.0.1
globby: ^14.0.0
normalize-path: ^3.0.0
schema-utils: ^4.2.0
serialize-javascript: ^6.0.2
peerDependencies:
webpack: ^5.1.0
checksum: 98127735336c6db5924688486d3a1854a41835963d0c0b81695b2e3d58c6675164be7d23dee7090b84a56d3c9923175d3d0863ac1942bcc3317d2efc1962b927
languageName: node
linkType: hard
"cross-spawn@npm:^7.0.3":
version: 7.0.3
resolution: "cross-spawn@npm:7.0.3"
@ -925,13 +1013,26 @@ __metadata:
languageName: node
linkType: hard
"fast-deep-equal@npm:^3.1.1":
"fast-deep-equal@npm:^3.1.1, fast-deep-equal@npm:^3.1.3":
version: 3.1.3
resolution: "fast-deep-equal@npm:3.1.3"
checksum: e21a9d8d84f53493b6aa15efc9cfd53dd5b714a1f23f67fb5dc8f574af80df889b3bce25dc081887c6d25457cce704e636395333abad896ccdec03abaf1f3f9d
languageName: node
linkType: hard
"fast-glob@npm:^3.3.2":
version: 3.3.2
resolution: "fast-glob@npm:3.3.2"
dependencies:
"@nodelib/fs.stat": ^2.0.2
"@nodelib/fs.walk": ^1.2.3
glob-parent: ^5.1.2
merge2: ^1.3.0
micromatch: ^4.0.4
checksum: 900e4979f4dbc3313840078419245621259f349950411ca2fa445a2f9a1a6d98c3b5e7e0660c5ccd563aa61abe133a21765c6c0dec8e57da1ba71d8000b05ec1
languageName: node
linkType: hard
"fast-json-stable-stringify@npm:^2.0.0":
version: 2.1.0
resolution: "fast-json-stable-stringify@npm:2.1.0"
@ -946,6 +1047,15 @@ __metadata:
languageName: node
linkType: hard
"fastq@npm:^1.6.0":
version: 1.17.1
resolution: "fastq@npm:1.17.1"
dependencies:
reusify: ^1.0.4
checksum: a8c5b26788d5a1763f88bae56a8ddeee579f935a831c5fe7a8268cea5b0a91fbfe705f612209e02d639b881d7b48e461a50da4a10cfaa40da5ca7cc9da098d88
languageName: node
linkType: hard
"fill-range@npm:^7.0.1":
version: 7.0.1
resolution: "fill-range@npm:7.0.1"
@ -981,6 +1091,24 @@ __metadata:
languageName: node
linkType: hard
"glob-parent@npm:^5.1.2":
version: 5.1.2
resolution: "glob-parent@npm:5.1.2"
dependencies:
is-glob: ^4.0.1
checksum: f4f2bfe2425296e8a47e36864e4f42be38a996db40420fe434565e4480e3322f18eb37589617a98640c5dc8fdec1a387007ee18dbb1f3f5553409c34d17f425e
languageName: node
linkType: hard
"glob-parent@npm:^6.0.1":
version: 6.0.2
resolution: "glob-parent@npm:6.0.2"
dependencies:
is-glob: ^4.0.3
checksum: c13ee97978bef4f55106b71e66428eb1512e71a7466ba49025fc2aec59a5bfb0954d5abd58fc5ee6c9b076eef4e1f6d3375c2e964b88466ca390da4419a786a8
languageName: node
linkType: hard
"glob-to-regexp@npm:^0.4.1":
version: 0.4.1
resolution: "glob-to-regexp@npm:0.4.1"
@ -988,6 +1116,20 @@ __metadata:
languageName: node
linkType: hard
"globby@npm:^14.0.0":
version: 14.0.0
resolution: "globby@npm:14.0.0"
dependencies:
"@sindresorhus/merge-streams": ^1.0.0
fast-glob: ^3.3.2
ignore: ^5.2.4
path-type: ^5.0.0
slash: ^5.1.0
unicorn-magic: ^0.1.0
checksum: f331b42993e420c8f2b61a6ca062276977ea6d95f181640ff018f00200f4fe5b50f1fae7540903483e6570ca626fe16234ab88e848d43381a2529220548a9d39
languageName: node
linkType: hard
"graceful-fs@npm:^4.1.2":
version: 4.2.10
resolution: "graceful-fs@npm:4.2.10"
@ -1036,6 +1178,13 @@ __metadata:
languageName: node
linkType: hard
"ignore@npm:^5.2.4":
version: 5.3.1
resolution: "ignore@npm:5.3.1"
checksum: 71d7bb4c1dbe020f915fd881108cbe85a0db3d636a0ea3ba911393c53946711d13a9b1143c7e70db06d571a5822c0a324a6bcde5c9904e7ca5047f01f1bf8cd3
languageName: node
linkType: hard
"import-local@npm:^3.0.2":
version: 3.1.0
resolution: "import-local@npm:3.1.0"
@ -1064,6 +1213,22 @@ __metadata:
languageName: node
linkType: hard
"is-extglob@npm:^2.1.1":
version: 2.1.1
resolution: "is-extglob@npm:2.1.1"
checksum: df033653d06d0eb567461e58a7a8c9f940bd8c22274b94bf7671ab36df5719791aae15eef6d83bbb5e23283967f2f984b8914559d4449efda578c775c4be6f85
languageName: node
linkType: hard
"is-glob@npm:^4.0.1, is-glob@npm:^4.0.3":
version: 4.0.3
resolution: "is-glob@npm:4.0.3"
dependencies:
is-extglob: ^2.1.1
checksum: d381c1319fcb69d341cc6e6c7cd588e17cd94722d9a32dbd60660b993c4fb7d0f19438674e68dfec686d09b7c73139c9166b47597f846af387450224a8101ab4
languageName: node
linkType: hard
"is-number@npm:^7.0.0":
version: 7.0.0
resolution: "is-number@npm:7.0.0"
@ -1119,6 +1284,13 @@ __metadata:
languageName: node
linkType: hard
"json-schema-traverse@npm:^1.0.0":
version: 1.0.0
resolution: "json-schema-traverse@npm:1.0.0"
checksum: 02f2f466cdb0362558b2f1fd5e15cce82ef55d60cd7f8fa828cf35ba74330f8d767fcae5c5c2adb7851fa811766c694b9405810879bc4e1ddd78a7c0e03658ad
languageName: node
linkType: hard
"kind-of@npm:^6.0.2":
version: 6.0.3
resolution: "kind-of@npm:6.0.3"
@ -1165,7 +1337,14 @@ __metadata:
languageName: node
linkType: hard
"micromatch@npm:^4.0.0":
"merge2@npm:^1.3.0":
version: 1.4.1
resolution: "merge2@npm:1.4.1"
checksum: 7268db63ed5169466540b6fb947aec313200bcf6d40c5ab722c22e242f651994619bcd85601602972d3c85bd2cc45a358a4c61937e9f11a061919a1da569b0c2
languageName: node
linkType: hard
"micromatch@npm:^4.0.0, micromatch@npm:^4.0.4":
version: 4.0.5
resolution: "micromatch@npm:4.0.5"
dependencies:
@ -1214,6 +1393,13 @@ __metadata:
languageName: node
linkType: hard
"normalize-path@npm:^3.0.0":
version: 3.0.0
resolution: "normalize-path@npm:3.0.0"
checksum: 88eeb4da891e10b1318c4b2476b6e2ecbeb5ff97d946815ffea7794c31a89017c70d7f34b3c2ebf23ef4e9fc9fb99f7dffe36da22011b5b5c6ffa34f4873ec20
languageName: node
linkType: hard
"p-limit@npm:^2.2.0":
version: 2.3.0
resolution: "p-limit@npm:2.3.0"
@ -1260,6 +1446,13 @@ __metadata:
languageName: node
linkType: hard
"path-type@npm:^5.0.0":
version: 5.0.0
resolution: "path-type@npm:5.0.0"
checksum: 15ec24050e8932c2c98d085b72cfa0d6b4eeb4cbde151a0a05726d8afae85784fc5544f733d8dfc68536587d5143d29c0bd793623fad03d7e61cc00067291cd5
languageName: node
linkType: hard
"picocolors@npm:^1.0.0":
version: 1.0.0
resolution: "picocolors@npm:1.0.0"
@ -1372,6 +1565,13 @@ __metadata:
languageName: node
linkType: hard
"queue-microtask@npm:^1.2.2":
version: 1.2.3
resolution: "queue-microtask@npm:1.2.3"
checksum: b676f8c040cdc5b12723ad2f91414d267605b26419d5c821ff03befa817ddd10e238d22b25d604920340fd73efd8ba795465a0377c4adf45a4a41e4234e42dc4
languageName: node
linkType: hard
"randombytes@npm:^2.1.0":
version: 2.1.0
resolution: "randombytes@npm:2.1.0"
@ -1390,6 +1590,13 @@ __metadata:
languageName: node
linkType: hard
"require-from-string@npm:^2.0.2":
version: 2.0.2
resolution: "require-from-string@npm:2.0.2"
checksum: a03ef6895445f33a4015300c426699bc66b2b044ba7b670aa238610381b56d3f07c686251740d575e22f4c87531ba662d06937508f0f3c0f1ddc04db3130560b
languageName: node
linkType: hard
"resolve-cwd@npm:^3.0.0":
version: 3.0.0
resolution: "resolve-cwd@npm:3.0.0"
@ -1432,6 +1639,22 @@ __metadata:
languageName: node
linkType: hard
"reusify@npm:^1.0.4":
version: 1.0.4
resolution: "reusify@npm:1.0.4"
checksum: c3076ebcc22a6bc252cb0b9c77561795256c22b757f40c0d8110b1300723f15ec0fc8685e8d4ea6d7666f36c79ccc793b1939c748bf36f18f542744a4e379fcc
languageName: node
linkType: hard
"run-parallel@npm:^1.1.9":
version: 1.2.0
resolution: "run-parallel@npm:1.2.0"
dependencies:
queue-microtask: ^1.2.2
checksum: cb4f97ad25a75ebc11a8ef4e33bb962f8af8516bb2001082ceabd8902e15b98f4b84b4f8a9b222e5d57fc3bd1379c483886ed4619367a7680dad65316993021d
languageName: node
linkType: hard
"rw@npm:1":
version: 1.3.3
resolution: "rw@npm:1.3.3"
@ -1464,6 +1687,18 @@ __metadata:
languageName: node
linkType: hard
"schema-utils@npm:^4.2.0":
version: 4.2.0
resolution: "schema-utils@npm:4.2.0"
dependencies:
"@types/json-schema": ^7.0.9
ajv: ^8.9.0
ajv-formats: ^2.1.1
ajv-keywords: ^5.1.0
checksum: 26a0463d47683258106e6652e9aeb0823bf0b85843039e068b57da1892f7ae6b6b1094d48e9ed5ba5cbe9f7166469d880858b9d91abe8bd249421eb813850cde
languageName: node
linkType: hard
"semver@npm:^7.3.4, semver@npm:^7.5.4":
version: 7.6.0
resolution: "semver@npm:7.6.0"
@ -1475,7 +1710,7 @@ __metadata:
languageName: node
linkType: hard
"serialize-javascript@npm:^6.0.1":
"serialize-javascript@npm:^6.0.1, serialize-javascript@npm:^6.0.2":
version: 6.0.2
resolution: "serialize-javascript@npm:6.0.2"
dependencies:
@ -1509,6 +1744,13 @@ __metadata:
languageName: node
linkType: hard
"slash@npm:^5.1.0":
version: 5.1.0
resolution: "slash@npm:5.1.0"
checksum: 70434b34c50eb21b741d37d455110258c42d2cf18c01e6518aeb7299f3c6e626330c889c0c552b5ca2ef54a8f5a74213ab48895f0640717cacefeef6830a1ba4
languageName: node
linkType: hard
"source-map-js@npm:^1.0.2":
version: 1.0.2
resolution: "source-map-js@npm:1.0.2"
@ -1669,6 +1911,13 @@ __metadata:
languageName: node
linkType: hard
"unicorn-magic@npm:^0.1.0":
version: 0.1.0
resolution: "unicorn-magic@npm:0.1.0"
checksum: 48c5882ca3378f380318c0b4eb1d73b7e3c5b728859b060276e0a490051d4180966beeb48962d850fd0c6816543bcdfc28629dcd030bb62a286a2ae2acb5acb6
languageName: node
linkType: hard
"update-browserslist-db@npm:^1.0.13":
version: 1.0.13
resolution: "update-browserslist-db@npm:1.0.13"

Loading…
Cancel
Save