generated from jackyzha0/quartz
-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Affected files: content/.obsidian/plugins/recent-files-obsidian/data.json content/.obsidian/workspace.json content/chart-js/react-chartjs-2/Datasets in react-chartjs-2.md content/chart-js/react-chartjs-2/Tree-shaking in react-chartjs-2.md content/chart-js/react-chartjs-2/Tree-shaking with react-chartjs-2.md content/chart-js/react-chartjs-2/datasetIdKey in react-chartjs-2.md content/chart-js/react-chartjs-2/react-chartjs-2.md quartz.layout.ts
- Loading branch information
Showing
8 changed files
with
169 additions
and
73 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
61 changes: 61 additions & 0 deletions
61
content/chart-js/react-chartjs-2/Datasets in react-chartjs-2.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| --- | ||
| title: Datasets in react-chartjs-2 | ||
| draft: false | ||
| date: 2023-10-03 16:30 | ||
| tags: | ||
| - learning | ||
| - chart-js | ||
| - react-chartjs-2 | ||
| --- | ||
|
|
||
| You may encounter a problem where certain events, such as hover tooltips, inadvertently trigger the merging of datasets in a chart. This issue occurs because the library requires a unique key to track changes in dataset series, and in the absence of such a key, it cannot distinguish between datasets during updates. | ||
|
|
||
| To address the problem, you have two possible solutions: | ||
| 1. Add a `label` to each dataset. [[react-chartjs-2]] uses the `label` property as the default key to distinguish datasets. | ||
|
|
||
| ```js title="Add label" {5,11} | ||
| const data: ChartData<"line"> = { | ||
| labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], | ||
| datasets: [ | ||
| { | ||
| label: "Dataset 1", | ||
| data: [12, 19, 3, 5, 2, 3], | ||
| borderColor: "rgb(255, 99, 132)", | ||
| backgroundColor: "rgba(255, 99, 132, 0.5)", | ||
| }, | ||
| { | ||
| label: "Dataset 2", | ||
| data: [2, 3, 20, 5, 1, 4], | ||
| borderColor: "rgb(54, 162, 235)", | ||
| backgroundColor: "rgba(54, 162, 235, 0.5)", | ||
| }, | ||
| ], | ||
| }; | ||
| ``` | ||
|
|
||
| 2. You can specify a different property to be used as a key by passing a `datasetIdKey` prop to your chart component. | ||
|
|
||
| ```js title="Add datasetIdKey" {19} | ||
| const data: ChartData<"line"> = { | ||
| labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], | ||
| datasets: [ | ||
| { | ||
| label: "", | ||
| data: [12, 19, 3, 5, 2, 3], | ||
| borderColor: "rgb(255, 99, 132)", | ||
| backgroundColor: "rgba(255, 99, 132, 0.5)", | ||
| }, | ||
| { | ||
| label: "", | ||
| data: [2, 3, 20, 5, 1, 4], | ||
| borderColor: "rgb(54, 162, 235)", | ||
| backgroundColor: "rgba(54, 162, 235, 0.5)", | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| <Line data={data} options={options} datasetIdKey="borderColor" /> | ||
| ``` | ||
|
|
||
| > [!info] References | ||
| > - [Working with datasets | react-chartjs-2](https://react-chartjs-2.js.org/docs/working-with-datasets) |
82 changes: 82 additions & 0 deletions
82
content/chart-js/react-chartjs-2/Tree-shaking in react-chartjs-2.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| --- | ||
| title: Tree-shaking with react-chartjs-2 | ||
| draft: false | ||
| date: 2023-10-03 16:29 | ||
| tags: | ||
| - learning | ||
| - chart-js | ||
| - react-chartjs-2 | ||
| --- | ||
|
|
||
| There are three different ways to import dependencies before creating our chart: | ||
| 1. The laziest way - import all dependencies from [[Chart.js]]. | ||
| 2. The tree-shakable way - import only what is needed for the specific chart. | ||
| 3. The tree-shakable typed chart components - no need for a controller. | ||
|
|
||
| ```tsx title="lazy way" {1} | ||
| import 'chart.js/auto'; | ||
| import { Chart } from 'react-chartjs-2'; | ||
|
|
||
| <Chart type='line' data={chartData} /> | ||
| ``` | ||
|
|
||
| When you use `Chart` as your chart component, it's almost the same way to implement [[Tree-shaking of Chart.js|tree-shaking in native Chart.js]]. | ||
|
|
||
| ```tsx title="tree-shakable way" {10,12,22,25} | ||
| import { | ||
| CategoryScale, | ||
| LinearScale, | ||
| PointElement, | ||
| LineElement, | ||
| Title, | ||
| Legend, | ||
| Tooltip, | ||
| Chart as ChartJS, | ||
| LineController, | ||
| } from "chart.js"; | ||
| import { Chart } from "react-chartjs-2"; | ||
|
|
||
| ChartJS.register( | ||
| CategoryScale, | ||
| LinearScale, | ||
| PointElement, | ||
| LineElement, | ||
| Title, | ||
| Legend, | ||
| Tooltip, | ||
| LineController | ||
| ); | ||
|
|
||
| <Chart type="line" data={data} options={options} /> | ||
| ``` | ||
|
|
||
| When you use `Line` or any other chart component instead of `Chart`, you can simply omit the import of its controller. For example, there's no need to register `LineController` when you use `Line` instead of `Chart`. | ||
|
|
||
| ```tsx title="typed chart components" {11,23} | ||
| import { | ||
| CategoryScale, | ||
| LinearScale, | ||
| PointElement, | ||
| LineElement, | ||
| Title, | ||
| Legend, | ||
| Tooltip, | ||
| Chart as ChartJS, | ||
| } from "chart.js"; | ||
| import { Line } from "react-chartjs-2"; | ||
|
|
||
| ChartJS.register( | ||
| CategoryScale, | ||
| LinearScale, | ||
| PointElement, | ||
| LineElement, | ||
| Title, | ||
| Legend, | ||
| Tooltip, | ||
| ); | ||
|
|
||
| <Line data={data} options={options} /> | ||
| ``` | ||
|
|
||
| > [!info] References | ||
| > - [Migration to v4 | react-chartjs-2](https://react-chartjs-2.js.org/docs/migration-to-v4#tree-shaking) |
14 changes: 0 additions & 14 deletions
14
content/chart-js/react-chartjs-2/Tree-shaking with react-chartjs-2.md
This file was deleted.
Oops, something went wrong.
14 changes: 0 additions & 14 deletions
14
content/chart-js/react-chartjs-2/datasetIdKey in react-chartjs-2.md
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters