fix: clean up typedcharts and readme

- simplified api - updated readme to reflect api - add dev to workspace folder
s0ftik3 · May 16, 2023 · c2ab929 · c2ab929
1 parent 19c4c16
commit c2ab929
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -8,11 +8,14 @@
 [![downloads](https://badgen.net/npm/dm/solid-chartjs)](https://www.npmjs.com/package/solid-chartjs)
 [![telegram chat](https://img.shields.io/badge/Ask%20a%20Question-Telegram-blue)](https://t.me/solid_chartjs)
 
-The `ChartJs` component is a SolidJS wrapper around the Chart.js library, allowing you to easily create interactive charts in your SolidJS applications.
+The `solid-chartjs` library is a SolidJS wrapper around the [`Chart.js`](https://www.chartjs.org) library, allowing you to easily create interactive charts in your SolidJS applications.
 
-- [Quick start](#quick-start)
-- [Chart Props](#chart-props)
-- [Examples](#examples)
+> **Note**: This library is _heavily_ inspired by [react-chartjs-2](https://react-chartjs-2.js.org/)
+
+- [solid-chartjs](#solid-chartjs)
+  - [Quick start](#quick-start)
+  - [Chart Props](#chart-props)
+  - [Examples](#examples)
 
 ## Quick start
 
@@ -29,9 +32,9 @@ pnpm add solid-chartjs
 Usage:
 
 ```tsx
-import { ChartJs } from 'solid-chartjs'
+import { DefaultChart } from 'solid-chartjs'
 
-function MyChart() {
+const MyChart = () => {
     const chartData = {
         labels: ['January', 'February', 'March', 'April', 'May'],
         datasets: [
@@ -48,7 +51,7 @@ function MyChart() {
     }
 
     return (
-        <ChartJs
+        <DefaultChart
             type="line"
             data={chartData}
             options={chartOptions}
@@ -60,6 +63,7 @@ function MyChart() {
 ```
 
 ## Chart Props
+
 | Prop     | Description                                     | Type    |
 |----------|-------------------------------------------------|---------|
 | width    | The width of the chart canvas in pixels.        | number \| undefined   |
@@ -71,11 +75,13 @@ function MyChart() {
 | plugins  | The chart plugins object.                       | [Plugin](https://www.chartjs.org/docs/latest/api/interfaces/Plugin.html)[] \| undefined |
 
 ## Examples
+
 Check out `/dev` folder and run the SolidJs application to see how it works.
 
 You can also use typed charts components:
+
 ```tsx
-import { Line, Bar, Doughnut, Radar, PolarArea, Bubble, Pie, Scatter } from './typedCharts'
+import { Line, Bar, Doughnut, Radar, PolarArea, Bubble, Pie, Scatter } from 'solid-chartjs'
 
 <Line data={data} options={options} width={500} height={500} />
 <Bar data={data} options={options} width={500} height={500} />
@@ -84,11 +90,21 @@ import { Line, Bar, Doughnut, Radar, PolarArea, Bubble, Pie, Scatter } from './t
 ```
 
 Usage of `fallback` prop:
+
 ```tsx
-<ChartJs
+
+const fallback = () => {
+    return (
+        <div>
+            <p>Chart is not available</p>
+        </div>
+    )
+}
+
+<DefaultChart
     type="bar"
     data={chartData}
     options={chartOptions}
-    fallback={<p>Chart is not available</p>}
+    fallback={fallback}
 />
-```
+```
diff --git a/solidjs-chartjs.code-workspace b/solidjs-chartjs.code-workspace
@@ -7,6 +7,10 @@
         {
             "name": "Source",
             "path": "./src"
+        },
+        {
+            "name": "Dev",
+            "path": "./dev"
         }
     ],
     "settings": {

diff --git a/src/typedCharts.tsx b/src/typedCharts.tsx
@@ -1,20 +1,31 @@
-import * as ChartJS from 'chart.js'
+import {
+    Chart,
+    LineController,
+    BarController,
+    RadarController,
+    DoughnutController,
+    PolarAreaController,
+    BubbleController,
+    PieController,
+    ScatterController,
+} from 'chart.js'
 import DefaultChart from './chart'
 import type { ChartProps } from './types'
 import type { ChartType, ChartComponentLike } from 'chart.js'
 
 export type TypedChartProps = Omit<ChartProps, 'type'>
+export { DefaultChart }
 
 function createTypedChart<T extends ChartType>(type: T, registerables: ChartComponentLike) {
-    ChartJS.Chart.register(registerables)
+    Chart.register(registerables)
     return (props: TypedChartProps) => <DefaultChart type={type} {...props} />
 }
 
-export const Line = /* #__PURE__ */ createTypedChart('line', ChartJS.LineController)
-export const Bar = /* #__PURE__ */ createTypedChart('bar', ChartJS.BarController)
-export const Radar = /* #__PURE__ */ createTypedChart('radar', ChartJS.RadarController)
-export const Doughnut = /* #__PURE__ */ createTypedChart('doughnut', ChartJS.DoughnutController)
-export const PolarArea = /* #__PURE__ */ createTypedChart('polarArea', ChartJS.PolarAreaController)
-export const Bubble = /* #__PURE__ */ createTypedChart('bubble', ChartJS.BubbleController)
-export const Pie = /* #__PURE__ */ createTypedChart('pie', ChartJS.PieController)
-export const Scatter = /* #__PURE__ */ createTypedChart('scatter', ChartJS.ScatterController)
+export const Line = /* #__PURE__ */ createTypedChart('line', LineController)
+export const Bar = /* #__PURE__ */ createTypedChart('bar', BarController)
+export const Radar = /* #__PURE__ */ createTypedChart('radar', RadarController)
+export const Doughnut = /* #__PURE__ */ createTypedChart('doughnut', DoughnutController)
+export const PolarArea = /* #__PURE__ */ createTypedChart('polarArea', PolarAreaController)
+export const Bubble = /* #__PURE__ */ createTypedChart('bubble', BubbleController)
+export const Pie = /* #__PURE__ */ createTypedChart('pie', PieController)
+export const Scatter = /* #__PURE__ */ createTypedChart('scatter', ScatterController)