diff --git a/config/webpack/demo/webpack.config.dev.js b/config/webpack/demo/webpack.config.dev.js index d2fcb9a1b..bb285b8fb 100644 --- a/config/webpack/demo/webpack.config.dev.js +++ b/config/webpack/demo/webpack.config.dev.js @@ -3,17 +3,19 @@ const path = require("path"); const glob = require("glob"); const LodashModuleReplacementPlugin = require("lodash-webpack-plugin"); +const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin"); const ROOT = path.resolve(__dirname, "../../.."); // eslint-disable-line no-undef -const PKGS = path.join(ROOT, "packages") -const VICTORY_GLOB = path.join(PKGS, "victory*/package.json").replace(/\\/g, "/"); +const PKGS = path.join(ROOT, "packages"); +const VICTORY_GLOB = path + .join(PKGS, "victory*/package.json") + .replace(/\\/g, "/"); // Read all the victory packages and alias. -const VICTORY_ALIASES = glob.sync(VICTORY_GLOB) - .reduce((memo, pkgPath) => { - const key = path.dirname(path.relative(PKGS, pkgPath)); - memo[key] = path.resolve(path.dirname(pkgPath)); - return memo; - }, {}); +const VICTORY_ALIASES = glob.sync(VICTORY_GLOB).reduce((memo, pkgPath) => { + const key = path.dirname(path.relative(PKGS, pkgPath)); + memo[key] = path.resolve(path.dirname(pkgPath)); + return memo; +}, {}); const DEMO = path.resolve("demo"); const WDS_PORT = 3000; @@ -55,6 +57,11 @@ module.exports = { ], }, plugins: [ + new ForkTsCheckerWebpackPlugin({ + typescript: { + configFile: path.resolve(ROOT, "demo", "ts", "tsconfig.json"), + }, + }), new LodashModuleReplacementPlugin({ shorthands: true, currying: true, @@ -62,5 +69,5 @@ module.exports = { paths: true, placeholders: true, }), - ] + ], }; diff --git a/demo/.eslintrc b/demo/ts/.eslintrc similarity index 95% rename from demo/.eslintrc rename to demo/ts/.eslintrc index 501e86c43..b4baab26f 100644 --- a/demo/.eslintrc +++ b/demo/ts/.eslintrc @@ -1,5 +1,5 @@ { - "extends": ["../.eslintrc.js"], + "extends": ["../../.eslintrc.js"], "rules": { "@typescript-eslint/ban-types": "off", "@typescript-eslint/explicit-function-return-type": "off", diff --git a/demo/ts/components/accessibility-demo.tsx b/demo/ts/components/accessibility-demo.tsx index 9a2c668de..75d20a44e 100644 --- a/demo/ts/components/accessibility-demo.tsx +++ b/demo/ts/components/accessibility-demo.tsx @@ -32,7 +32,7 @@ import { accessibilityVoronoiData, accessibilityErrorBarData, accessibilityCandlestickData, -} from "../../demo-data"; +} from "../demo-data"; const pageHeadingStyle: React.CSSProperties = { display: "flex", @@ -65,7 +65,7 @@ const chartContainerStyle: React.CSSProperties = { }; export const assignIndexValue = ( - index: number | string, + index: number | string | undefined, value: number, ): number => { const determineValidNumber = Number(index); @@ -180,7 +180,7 @@ export default class VictoryAccessibilityDemo extends React.Component { dataComponent={ - `area chart stack ${data[0]._stack}` + `area chart stack ${data?.[0]._stack}` } tabIndex={20} /> @@ -192,7 +192,7 @@ export default class VictoryAccessibilityDemo extends React.Component { dataComponent={ - `area chart stack ${data[0]._stack}` + `area chart stack ${data?.[0]._stack}` } tabIndex={20.1} /> @@ -204,7 +204,7 @@ export default class VictoryAccessibilityDemo extends React.Component { dataComponent={ - `area chart stack ${data[0]._stack}` + `area chart stack ${data?.[0]._stack}` } tabIndex={20.2} /> @@ -216,7 +216,7 @@ export default class VictoryAccessibilityDemo extends React.Component { dataComponent={ - `area chart stack ${data[0]._stack}` + `area chart stack ${data?.[0]._stack}` } tabIndex={20.3} /> @@ -242,12 +242,14 @@ export default class VictoryAccessibilityDemo extends React.Component { dataComponent={ - data.map( - (dataPoint: any, i: number) => - `data point ${i + 1} x value is ${ - dataPoint.x - } and y value is ${dataPoint.y}`, - ) + data + ?.map( + (dataPoint: any, i: number) => + `data point ${i + 1} x value is ${ + dataPoint.x + } and y value is ${dataPoint.y}`, + ) + .join("") || "" } /> } diff --git a/demo/ts/components/animation-demo.tsx b/demo/ts/components/animation-demo.tsx index 59d8f1299..a29b93b46 100644 --- a/demo/ts/components/animation-demo.tsx +++ b/demo/ts/components/animation-demo.tsx @@ -7,9 +7,10 @@ import { VictoryStack } from "victory-stack"; import { VictoryArea } from "victory-area"; import { VictoryTheme } from "victory-core"; -export default class App extends React.Component { - constructor() { - super(); +export default class App extends React.Component { + constructor(props) { + super(props); + this.state = { data: this.getData(), arrayData: this.getArrayData(), @@ -99,7 +100,7 @@ export default class App extends React.Component { parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, }; - const containerStyle = { + const containerStyle: React.CSSProperties = { display: "flex", flexDirection: "row", flexWrap: "wrap", diff --git a/demo/ts/components/canvas-demo.tsx b/demo/ts/components/canvas-demo.tsx index c2e6282cd..4b3a45497 100644 --- a/demo/ts/components/canvas-demo.tsx +++ b/demo/ts/components/canvas-demo.tsx @@ -1,17 +1,18 @@ /* eslint-disable no-magic-numbers */ import React from "react"; + +import { range, random } from "lodash"; +import { VictoryChart } from "victory-chart"; +import { VictoryLine } from "victory-line"; +import { VictoryAxis } from "victory-axis"; +import { VictoryScatter } from "victory-scatter"; +import { VictoryBar } from "victory-bar"; import { - CanvasGroup, - CanvasCurve, - VictoryAxis, - VictoryBar, CanvasBar, - VictoryChart, - VictoryLine, - VictoryScatter, + CanvasCurve, + CanvasGroup, CanvasPoint, -} from "victory"; -import { range, random } from "lodash"; +} from "victory-canvas"; const populationData = [ { @@ -213,7 +214,7 @@ const populationData = [ }, ]; -const containerStyle = { +const containerStyle: React.CSSProperties = { display: "flex", flexDirection: "row", flexWrap: "wrap", @@ -239,7 +240,7 @@ const formatPopulation = (value) => { }; const getRandomData = (length = 100) => { - const data = []; + const data: any = []; for (let i = 0; i < length; i++) { data.push({ x: Math.random(), y: Math.random() }); } diff --git a/demo/ts/components/create-container-demo.tsx b/demo/ts/components/create-container-demo.tsx index 778504cf0..e32ff6927 100644 --- a/demo/ts/components/create-container-demo.tsx +++ b/demo/ts/components/create-container-demo.tsx @@ -23,7 +23,7 @@ const Charts = ({ behaviors }) => { const chartStyle = { parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, }; - const CustomContainer = createContainer(behaviors[0], behaviors[1]); + const CustomContainer: any = createContainer(behaviors[0], behaviors[1]); const behaviorsList = behaviors.map((behavior) => `"${behavior}"`).join(", "); return ( @@ -211,7 +211,7 @@ const Charts = ({ behaviors }) => { strokeWidth: 2, }, }} - size={({ active }) => (active ? 5 : 3)} + barWidth={({ active }) => (active ? 5 : 3)} data={[ { x: 1, y: -5 }, { x: 2, y: 4 }, @@ -230,7 +230,7 @@ const Charts = ({ behaviors }) => { strokeWidth: 2, }, }} - size={({ active }) => (active ? 5 : 3)} + barWidth={({ active }) => (active ? 5 : 3)} data={[ { x: 1, y: -3 }, { x: 2, y: 5 }, diff --git a/demo/ts/components/draggable-demo.tsx b/demo/ts/components/draggable-demo.tsx index 872917d4e..8c53279ab 100644 --- a/demo/ts/components/draggable-demo.tsx +++ b/demo/ts/components/draggable-demo.tsx @@ -8,7 +8,6 @@ import { VictoryBrushLine } from "victory-brush-line"; import { VictoryScatter } from "victory-scatter"; import { DomainTuple, - DomainPropObjectType, VictoryClipContainer, Point, Selection, @@ -26,7 +25,7 @@ type PointDataType = { date: Date; }; -type ZoomDomainType = DomainPropObjectType; +type ZoomDomainType = { x?: DomainTuple; y?: DomainTuple }; interface DraggableDemoInterface { bars: BarDataType[]; diff --git a/demo/ts/components/external-events-demo.tsx b/demo/ts/components/external-events-demo.tsx index 65e23e864..a7eb9ab26 100644 --- a/demo/ts/components/external-events-demo.tsx +++ b/demo/ts/components/external-events-demo.tsx @@ -10,9 +10,10 @@ import { VictoryZoomContainer } from "victory-zoom-container"; import { VictoryVoronoiContainer } from "victory-voronoi-container"; import { range } from "lodash"; -class App extends React.Component { - constructor() { - super(); +class App extends React.Component { + constructor(props) { + super(props); + this.state = { data: this.getData(), }; @@ -77,7 +78,7 @@ class App extends React.Component { } render() { - const containerStyle = { + const containerStyle: React.CSSProperties = { display: "flex", flexDirection: "row", flexWrap: "wrap", @@ -240,7 +241,7 @@ class App extends React.Component { strokeWidth: 2, }, }} - size={({ active }) => (active ? 5 : 3)} + barWidth={({ active }) => (active ? 5 : 3)} data={[ { x: 1, y: -5 }, { x: 2, y: 4 }, @@ -259,7 +260,7 @@ class App extends React.Component { strokeWidth: 2, }, }} - size={({ active }) => (active ? 5 : 3)} + barWidth={({ active }) => (active ? 5 : 3)} data={[ { x: 1, y: -3 }, { x: 2, y: 5 }, diff --git a/demo/ts/components/victory-brush-line-demo.tsx b/demo/ts/components/victory-brush-line-demo.tsx index abf41c285..25ef524ac 100644 --- a/demo/ts/components/victory-brush-line-demo.tsx +++ b/demo/ts/components/victory-brush-line-demo.tsx @@ -117,7 +117,7 @@ class App extends React.Component { }; return this.state.datasets - .map((dataset) => (isActive(dataset) ? dataset.name : null)) + .map((dataset) => (isActive(dataset) ? dataset.name : null) || "") .filter(Boolean); } diff --git a/demo/ts/components/victory-voronoi-container-demo.tsx b/demo/ts/components/victory-voronoi-container-demo.tsx index eee4f9499..e3b135407 100644 --- a/demo/ts/components/victory-voronoi-container-demo.tsx +++ b/demo/ts/components/victory-voronoi-container-demo.tsx @@ -132,44 +132,6 @@ export default class VictoryVoronoiContainerDemo extends React.Component< /> - `y: ${datum.y}`} - labelComponent={ - { - return activePoints - .map(({ y }) => `value: ${y}`) - .join(" - "); - }} - /> - } - /> - } - > - - - - =6.9.0'} dependencies: - '@babel/helper-validator-identifier': 7.18.6 + '@babel/helper-validator-identifier': 7.22.20 to-fast-properties: 2.0.0 dev: true @@ -6460,7 +6462,7 @@ packages: resolution: {integrity: sha512-m8FOdUo77iMTwVRCyzWcqxlEIk+GnopbrRI15a0EaLbpZSCinIVI4kSQzWhkShK83GogvEFJSsHF3Ws0z1vrqA==} engines: {node: '>=12'} dependencies: - '@babel/code-frame': 7.18.6 + '@babel/code-frame': 7.23.5 '@babel/runtime': 7.18.6 '@types/aria-query': 4.2.2 aria-query: 5.0.0 @@ -11086,14 +11088,14 @@ packages: cosmiconfig: 7.0.1 deepmerge: 4.2.2 fs-extra: 10.1.0 - memfs: 3.4.7 + memfs: 3.5.3 minimatch: 3.1.2 node-abort-controller: 3.1.1 schema-utils: 3.1.1 semver: 7.5.4 tapable: 2.2.1 typescript: 4.7.4 - webpack: 5.74.0_jmvevvrkvprlsib7tsbgxwazju + webpack: 5.74.0_webpack-cli@4.10.0 dev: true /form-data/4.0.0: @@ -11190,10 +11192,6 @@ packages: minipass: 3.3.4 dev: true - /fs-monkey/1.0.3: - resolution: {integrity: sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==} - dev: true - /fs-monkey/1.0.5: resolution: {integrity: sha512-8uMbBjrhzW76TYgEV27Y5E//W2f/lTFmx78P2w19FZSxarhI/798APGQyuGCwmkNxgwGRhrLfvWyLBvNtuOmew==} dev: true @@ -13590,13 +13588,6 @@ packages: engines: {node: '>= 0.6'} dev: true - /memfs/3.4.7: - resolution: {integrity: sha512-ygaiUSNalBX85388uskeCyhSAoOSgzBbtVCr9jA2RROssFL9Q19/ZXFqS+2Th2sr1ewNIWgFdLzLC3Yl1Zv+lw==} - engines: {node: '>= 4.0.0'} - dependencies: - fs-monkey: 1.0.3 - dev: true - /memfs/3.5.3: resolution: {integrity: sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==} engines: {node: '>= 4.0.0'} @@ -17877,7 +17868,7 @@ packages: webpack: ^4.0.0 || ^5.0.0 dependencies: colorette: 2.0.19 - memfs: 3.4.7 + memfs: 3.5.3 mime-types: 2.1.35 range-parser: 1.2.1 schema-utils: 4.0.0