feat: ajout des charts

codegouvfr · Sep 6, 2024 · f4f5ed7 · f4f5ed7
1 parent 190d010
commit f4f5ed7
Show file tree

Hide file tree

Showing 12 changed files with 714 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -71,6 +71,7 @@
         "@emotion/react": "^11.10.4",
         "@emotion/styled": "^11.10.4",
         "@gouvfr/dsfr": "1.12.1",
+        "@gouvfr/dsfr-chart": "^1.0.0",
         "@mui/icons-material": "^5.14.18",
         "@mui/material": "^5.14.18",
         "@storybook/addon-a11y": "^6.5.16",

diff --git a/src/Chart/BarChart.tsx b/src/Chart/BarChart.tsx
@@ -0,0 +1,42 @@
+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/components-chart> */
+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,43 @@
+import React from "react";
+import { symToStr } from "tsafe/symToStr";
+import "@gouvfr/dsfr-chart/BarLineChart/bar-line-chart.common";
+import "@gouvfr/dsfr-chart/BarLineChart/bar-line-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/components-chart> */
+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,37 @@
+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/components-chart> */
+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,35 @@
+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/components-chart> */
+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,35 @@
+import React from "react";
+import { symToStr } from "tsafe/symToStr";
+import "@gouvfr/dsfr-chart/MultiLineChart/multi-line-chart.common";
+import "@gouvfr/dsfr-chart/MultiLineChart/multi-line-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
+            "multi-line-chart": IntrinsicGraphType & IntrinsicGraphLineType;
+        }
+    }
+}
+
+export type MultiLineChartBaseProps = MultiChartProps & ChartLineProps;
+
+export type MultiLineChartProps = MultiLineChartBaseProps & BaseChartProps;
+
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-chart> */
+export const MultiLineChart = chartWrapper(
+    (props: MultiLineChartBaseProps) => <multi-line-chart {...stringifyObjectValue(props)} />,
+    "multi-line-chart"
+);
+MultiLineChart.displayName = symToStr({ MultiLineChart });
+
+export default MultiLineChart;
diff --git a/src/Chart/PieChart.tsx b/src/Chart/PieChart.tsx
@@ -0,0 +1,37 @@
+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/components-chart> */
+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,33 @@
+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/components-chart> */
+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,42 @@
+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/components-chart> */
+export const ScatterChart = chartWrapper(
+    (props: ScatterChartBaseProps) => <scatter-chart {...stringifyObjectValue(props)} />,
+    "scatter-chart"
+);
+ScatterChart.displayName = symToStr({ ScatterChart });
+
+export default ScatterChart;