Feat/chart settings

package.json

@@ -31,7 +31,9 @@
     "react-router-dom": "^6.14.1",
     "react-router-hash-link": "^2.4.3",
     "react-scripts": "5.0.1",
+    "react-sortablejs": "^6.1.4",
     "react-use": "^17.4.0",
+    "sortablejs": "^1.15.3",
     "styled-components": "^6.0.3",
     "tabulator-tables": "^6.2.1",
     "typescript": "^4.4.2",
@@ -58,10 +60,12 @@
     "@types/react": "^18.0.0",
     "@types/react-csv": "^1.1.6",
     "@types/react-dom": "^18.0.0",
+    "@types/sortablejs": "^1.15.8",
     "@types/styled-components": "^5.1.26",
     "babel-plugin-styled-components": "^2.1.4",
     "cypress": "^13.12.0",
     "eslint-plugin-storybook": "^0.8.0",
+    "prettier": "3.3.3",
     "prop-types": "^15.8.1",
     "storybook": "^8.0.8",
     "storybook-addon-remix-react-router": "^3.0.0",

src/app/components/chart-settings/ChartSettings.stories.tsx

@@ -0,0 +1,133 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ChartSettings } from "app/components/chart-settings";
+import { withRouter } from "storybook-addon-remix-react-router";
+import { ChartSettingsProps } from "app/components/chart-settings/data";
+import { treesDropdownItems } from "app/components/chart-settings/variations/treemap/data";
+import {
+  xAxisDropdownItems,
+  yAxisDropdownItems,
+  stacksDropdownItems,
+} from "app/components/chart-settings/variations/bar/data";
+import { rowsDropdownItems } from "./variations/table/data";
+import { ChartSettingsSortByOrderProps } from "./sort-by/data";
+
+const Wrapper: React.FC<{
+  chartType: ChartSettingsProps["chartType"];
+}> = (props: { chartType: ChartSettingsProps["chartType"] }) => {
+  const [stacked, setStacked] = React.useState(false);
+  const [xAxis, setXAxis] = React.useState(xAxisDropdownItems[0].value);
+  const [yAxis, setYAxis] = React.useState(yAxisDropdownItems[0].value);
+  const [stacks, setStacks] = React.useState(stacksDropdownItems[0].value);
+  const [nested, setNested] = React.useState(false);
+  const [trees, setTrees] = React.useState(treesDropdownItems[0].value);
+  const [nestedContent, setNestedContent] = React.useState(
+    treesDropdownItems[0].value
+  );
+  const [rows, setRows] = React.useState(rowsDropdownItems[0].value);
+  const [tableOrder, setTableOrder] =
+    React.useState<ChartSettingsSortByOrderProps["order"]>(null);
+  const handleResetTableOrder = () => {
+    setTableOrder(null);
+  };
+
+  const csprops = React.useMemo(() => {
+    switch (props.chartType) {
+      case "bar":
+        return {
+          barProps: {
+            stacked,
+            xAxis,
+            yAxis,
+            stacks,
+            setStacked,
+            setXAxis,
+            setYAxis,
+            setStacks,
+            stacksDropdownItems,
+          },
+        };
+      case "line":
+        return {
+          lineProps: { xAxis, yAxis, setXAxis, setYAxis },
+        };
+      case "treemap":
+        return {
+          treemapProps: {
+            nested,
+            trees,
+            nestedContent,
+            setNested,
+            setTrees,
+            setNestedContent,
+          },
+        };
+      case "table":
+        return {
+          tableProps: {
+            rows,
+            setRows,
+            order: tableOrder,
+            setOrder: setTableOrder,
+            onReset: handleResetTableOrder,
+            secondary: true,
+          },
+        };
+      default:
+        return {};
+    }
+  }, [
+    props.chartType,
+    stacked,
+    xAxis,
+    yAxis,
+    stacks,
+    nested,
+    trees,
+    nestedContent,
+  ]);
+
+  const reset = () => {
+    setStacked(false);
+    setXAxis(xAxisDropdownItems[0].value);
+    setYAxis(yAxisDropdownItems[0].value);
+    setStacks(stacksDropdownItems[0].value);
+    setNested(false);
+    setTrees(treesDropdownItems[0].value);
+    setNestedContent(treesDropdownItems[0].value);
+  };
+
+  return (
+    <ChartSettings
+      chartType={props.chartType}
+      reset={reset}
+      {...csprops}
+      handleSettingsPanelClose={() => {}}
+    />
+  );
+};
+
+const meta = {
+  title: "Components/Chart settings",
+  component: Wrapper,
+  decorators: [withRouter],
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    chartType: {
+      control: "select",
+      options: ["bar", "line", "treemap", "table"],
+    },
+  },
+} satisfies Meta<typeof Wrapper>;
+
+export default meta;
+type StoryType = StoryObj<typeof meta>;
+
+export const Primary: StoryType = {
+  args: {
+    chartType: "bar",
+  },
+};

src/app/components/chart-settings/data.ts

@@ -0,0 +1,61 @@
+import { colors } from "app/theme";
+import { ChartSettingsBarProps } from "app/components/chart-settings/variations/bar/data";
+import { ChartSettingsLineProps } from "app/components/chart-settings/variations/line/data";
+import { ChartSettingsTreemapProps } from "app/components/chart-settings/variations/treemap/data";
+import { ChartSettingsTableProps } from "./variations/table/data";
+import { ChartSettingsSankeyProps } from "./variations/sankey/data";
+import { ChartSettingsHeatmapProps } from "./variations/heatmap/data";
+import { ChartSettingsFinancialMetricsProps } from "./variations/financialMetrics/data";
+import { ChartSettingsSortByOrderProps } from "./sort-by/data";
+
+export interface ChartSettingsProps {
+  handleSettingsPanelClose: () => void;
+  chartType:
+    | "bar"
+    | "expandable-bar"
+    | "heatmap"
+    | "line"
+    | "polyline"
+    | "sankey"
+    | "sunsburst"
+    | "table"
+    | "treemap"
+    | "financialMetrics";
+
+  reset: () => void;
+  barProps?: ChartSettingsBarProps;
+  lineProps?: ChartSettingsLineProps;
+  tableProps?: ChartSettingsTableProps;
+  treemapProps?: ChartSettingsTreemapProps;
+  sankeyProps?: ChartSettingsSankeyProps;
+  heatmapProps?: ChartSettingsHeatmapProps;
+  financialMetricsSettingsProps?: ChartSettingsFinancialMetricsProps;
+  financialMetricsSortByProps?: ChartSettingsSortByOrderProps;
+}
+
+export const activeStyle = {
+  background: "#ffffff",
+  boxShadow: "0px 0px 2px 0px rgba(0, 0, 0, 0.25)",
+};
+
+export const inactiveStyle = {
+  cursor: "pointer",
+  color: colors.secondary[300],
+  background: colors.secondary[800],
+};
+export const switchButtonStyle = (paddingWidth: string, stacked: boolean) => ({
+  position: "absolute",
+  transformBox: "fill-box",
+  width: `calc(100% / 2 + ${paddingWidth})`,
+  height: "100%",
+  left: "0px",
+  top: "0px",
+  fontSize: "12px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transform: !stacked ? "translateX(0%)" : "translateX(100%)",
+  transition: "transform 0.3s, width 0.3s",
+  border: "1px solid #DFE3E5",
+  background: "#fff",
+});