Merge pull request #300 from K4ST0R/feat-chart

feat: ajout des charts
codegouvfr · Sep 8, 2024 · 0db478a · 0db478a
2 parents 0ab5f2a + 963cdf6
commit 0db478a
Show file tree

Hide file tree

Showing 28 changed files with 1,608 additions and 162 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -2,7 +2,8 @@ module.exports = {
     "stories": [
         "../stories/*.stories.mdx",
         "../stories/*.stories.@(ts|tsx)",
-        "../stories/blocks/*.stories.@(ts|tsx)"
+        "../stories/blocks/*.stories.@(ts|tsx)",
+        "../stories/charts/*.stories.@(ts|tsx)"
     ],
     "addons": [
         "@storybook/addon-links",

diff --git a/package.json b/package.json
@@ -63,6 +63,7 @@
     ],
     "homepage": "https://github.com/codegouvfr/react-dsfr",
     "dependencies": {
+        "@gouvfr/dsfr-chart": "^1.0.0",
         "tsafe": "^1.7.2",
         "yargs-parser": "^21.1.1"
     },

diff --git a/src/Chart/BarChart.tsx b/src/Chart/BarChart.tsx
@@ -0,0 +1,43 @@
+"use client";
+import React from "react";
+import { symToStr } from "tsafe/symToStr";
+import "@gouvfr/dsfr-chart/BarChart/bar-chart.common";
+import "@gouvfr/dsfr-chart/BarChart/bar-chart.css";
+import {
+    chartWrapper,
+    IntrinsicGraphType,
+    BaseChartProps,
+    stringifyObjectValue,
+    MultiChartProps,
+    ChartLineProps,
+    IntrinsicGraphLineType
+} from "./chartWrapper";
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            // https://github.com/GouvernementFR/dsfr-chart/blob/v1.0.0/src/components/BarChart.vue#L79
+            "bar-chart": {
+                horizontal?: string;
+                stacked?: string;
+            } & IntrinsicGraphType &
+                IntrinsicGraphLineType;
+        }
+    }
+}
+
+export type BarChartBaseProps = {
+    horizontal?: boolean;
+    stacked?: boolean;
+} & MultiChartProps &
+    ChartLineProps;
+
+export type BarChartProps = BarChartBaseProps & BaseChartProps;
+
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-barchart> */
+export const BarChart = chartWrapper((props: BarChartBaseProps) => {
+    return <bar-chart {...stringifyObjectValue(props)} />;
+}, "bar-chart");
+BarChart.displayName = symToStr({ BarChart });
+
+export default BarChart;
diff --git a/src/Chart/BarLineChart.tsx b/src/Chart/BarLineChart.tsx
@@ -0,0 +1,44 @@
+"use client";
+import React from "react";
+import { symToStr } from "tsafe/symToStr";
+import "@gouvfr/dsfr-chart/BarLineChart/barline-chart.common";
+import "@gouvfr/dsfr-chart/BarLineChart/barline-chart.css";
+import {
+    chartWrapper,
+    IntrinsicGraphType,
+    BaseChartProps,
+    stringifyObjectValue,
+    ChartProps,
+    ChartLineProps,
+    IntrinsicGraphLineType
+} from "./chartWrapper";
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            // https://github.com/GouvernementFR/dsfr-chart/blob/v1.0.0/src/components/BarLineChart.vue#L75
+            "bar-line-chart": {
+                ybar: string;
+            } & IntrinsicGraphType &
+                IntrinsicGraphLineType;
+        }
+    }
+}
+
+export type BarLineChartBaseProps = {
+    ybar: number[];
+    name?: [string, string];
+    horizontal?: boolean;
+    stacked?: boolean;
+} & Omit<ChartProps, "name"> &
+    ChartLineProps;
+
+export type BarLineChartProps = BarLineChartBaseProps & BaseChartProps;
+
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-barlinechart> */
+export const BarLineChart = chartWrapper((props: BarLineChartBaseProps) => {
+    return <bar-line-chart {...stringifyObjectValue(props)} />;
+}, "bar-line-chart");
+BarLineChart.displayName = symToStr({ BarLineChart });
+
+export default BarLineChart;
diff --git a/src/Chart/GaugeChart.tsx b/src/Chart/GaugeChart.tsx
@@ -0,0 +1,38 @@
+"use client";
+import React from "react";
+import { symToStr } from "tsafe/symToStr";
+import "@gouvfr/dsfr-chart/GaugeChart/gauge-chart.common";
+import "@gouvfr/dsfr-chart/GaugeChart/gauge-chart.css";
+import { chartWrapper, BaseChartProps, stringifyObjectValue, ChartColor } from "./chartWrapper";
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            // https://github.com/GouvernementFR/dsfr-chart/blob/v1.0.0/src/components/GaugeChart.vue#L55
+            "gauge-chart": {
+                value: string;
+                init: string;
+                target: string;
+                color: string;
+            };
+        }
+    }
+}
+
+export type GaugeChartBaseProps = {
+    value: number;
+    init: number;
+    target: number;
+    color?: ChartColor;
+};
+
+export type GaugeChartProps = GaugeChartBaseProps & BaseChartProps;
+
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-gaugechart> */
+export const GaugeChart = chartWrapper(
+    (props: GaugeChartBaseProps) => <gauge-chart {...stringifyObjectValue(props)} />,
+    "gauge-chart"
+);
+GaugeChart.displayName = symToStr({ GaugeChart });
+
+export default GaugeChart;
diff --git a/src/Chart/LineChart.tsx b/src/Chart/LineChart.tsx
@@ -0,0 +1,36 @@
+"use client";
+import React from "react";
+import { symToStr } from "tsafe/symToStr";
+import "@gouvfr/dsfr-chart/LineChart/line-chart.common";
+import "@gouvfr/dsfr-chart/LineChart/line-chart.css";
+import {
+    chartWrapper,
+    ChartProps,
+    IntrinsicGraphType,
+    BaseChartProps,
+    stringifyObjectValue,
+    ChartLineProps,
+    IntrinsicGraphLineType
+} from "./chartWrapper";
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            // https://github.com/GouvernementFR/dsfr-chart/blob/v1.0.0/src/components/LineChart.vue#L70
+            "line-chart": IntrinsicGraphType & IntrinsicGraphLineType;
+        }
+    }
+}
+
+export type LineChartBaseProps = ChartProps & ChartLineProps;
+
+export type LineChartProps = LineChartBaseProps & BaseChartProps;
+
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-linechart> */
+export const LineChart = chartWrapper(
+    (props: LineChartBaseProps) => <line-chart {...stringifyObjectValue(props)} />,
+    "line-chart"
+);
+LineChart.displayName = symToStr({ LineChart });
+
+export default LineChart;
diff --git a/src/Chart/MultiLineChart.tsx b/src/Chart/MultiLineChart.tsx
@@ -0,0 +1,36 @@
+"use client";
+import React from "react";
+import { symToStr } from "tsafe/symToStr";
+import "@gouvfr/dsfr-chart/MultiLineChart/multiline-chart.common";
+import "@gouvfr/dsfr-chart/MultiLineChart/multiline-chart.css";
+import {
+    chartWrapper,
+    IntrinsicGraphType,
+    BaseChartProps,
+    stringifyObjectValue,
+    MultiChartProps,
+    ChartLineProps,
+    IntrinsicGraphLineType
+} from "./chartWrapper";
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            // https://github.com/GouvernementFR/dsfr-chart/blob/v1.0.0/src/components/MultiLineChart.vue#L74
+            "multiline-chart": IntrinsicGraphType & IntrinsicGraphLineType;
+        }
+    }
+}
+
+export type MultiLineChartBaseProps = MultiChartProps & ChartLineProps;
+
+export type MultiLineChartProps = MultiLineChartBaseProps & BaseChartProps;
+
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-multilinechart> */
+export const MultiLineChart = chartWrapper(
+    (props: MultiLineChartBaseProps) => <multiline-chart {...stringifyObjectValue(props)} />,
+    "multiline-chart"
+);
+MultiLineChart.displayName = symToStr({ MultiLineChart });
+
+export default MultiLineChart;
diff --git a/src/Chart/PieChart.tsx b/src/Chart/PieChart.tsx
@@ -0,0 +1,38 @@
+"use client";
+import React from "react";
+import { symToStr } from "tsafe/symToStr";
+import "@gouvfr/dsfr-chart/PieChart/pie-chart.common";
+import "@gouvfr/dsfr-chart/PieChart/pie-chart.css";
+import {
+    chartWrapper,
+    ChartProps,
+    IntrinsicGraphType,
+    BaseChartProps,
+    stringifyObjectValue
+} from "./chartWrapper";
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            // https://github.com/GouvernementFR/dsfr-chart/blob/v1.0.0/src/components/PieChart.vue#L59
+            "pie-chart": {
+                fill?: string;
+            } & IntrinsicGraphType;
+        }
+    }
+}
+
+export type PieChartBaseProps = {
+    fill?: boolean;
+} & ChartProps;
+
+export type PieChartProps = PieChartBaseProps & BaseChartProps;
+
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-piechart> */
+export const PieChart = chartWrapper(
+    (props: PieChartBaseProps) => <pie-chart {...stringifyObjectValue(props)} />,
+    "pie-chart"
+);
+PieChart.displayName = symToStr({ PieChart });
+
+export default PieChart;
diff --git a/src/Chart/RadarChart.tsx b/src/Chart/RadarChart.tsx
@@ -0,0 +1,34 @@
+"use client";
+import React from "react";
+import { symToStr } from "tsafe/symToStr";
+import "@gouvfr/dsfr-chart/RadarChart/radar-chart.common";
+import "@gouvfr/dsfr-chart/RadarChart/radar-chart.css";
+import {
+    chartWrapper,
+    IntrinsicGraphType,
+    BaseChartProps,
+    stringifyObjectValue,
+    MultiChartProps
+} from "./chartWrapper";
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            // https://github.com/GouvernementFR/dsfr-chart/blob/v1.0.0/src/components/RadarChart.vue#L57
+            "radar-chart": IntrinsicGraphType;
+        }
+    }
+}
+
+export type RadarChartBaseProps = MultiChartProps;
+
+export type RadarChartProps = RadarChartBaseProps & BaseChartProps;
+
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-radarchart> */
+export const RadarChart = chartWrapper(
+    (props: RadarChartBaseProps) => <radar-chart {...stringifyObjectValue(props)} />,
+    "radar-chart"
+);
+RadarChart.displayName = symToStr({ RadarChart });
+
+export default RadarChart;
diff --git a/src/Chart/ScatterChart.tsx b/src/Chart/ScatterChart.tsx
@@ -0,0 +1,43 @@
+"use client";
+import React from "react";
+import { symToStr } from "tsafe/symToStr";
+import "@gouvfr/dsfr-chart/ScatterChart/scatter-chart.common";
+import "@gouvfr/dsfr-chart/ScatterChart/scatter-chart.css";
+import {
+    chartWrapper,
+    BaseChartProps,
+    MultiChartProps,
+    IntrinsicGraphType,
+    stringifyObjectValue,
+    ChartLineProps,
+    IntrinsicGraphLineType
+} from "./chartWrapper";
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            // https://github.com/GouvernementFR/dsfr-chart/blob/v1.0.0/src/components/ScatterChart.vue#L75
+            "scatter-chart": {
+                showLine?: string;
+            } & IntrinsicGraphType &
+                IntrinsicGraphLineType;
+        }
+    }
+}
+
+type ScatterChartBaseProps = {
+    x: number[][];
+    showLine?: boolean;
+} & Omit<MultiChartProps, "x"> &
+    ChartLineProps;
+
+export type ScatterChartProps = ScatterChartBaseProps & BaseChartProps;
+
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-radarchart> */
+export const ScatterChart = chartWrapper(
+    (props: ScatterChartBaseProps) => <scatter-chart {...stringifyObjectValue(props)} />,
+    "scatter-chart"
+);
+ScatterChart.displayName = symToStr({ ScatterChart });
+
+export default ScatterChart;