-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: charts and get delete endpoint init
- Loading branch information
Showing
9 changed files
with
550 additions
and
8 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| import React, { useMemo, forwardRef, useEffect } from "react"; | ||
| import { BarChart } from "@mui/x-charts/BarChart"; | ||
|
|
||
| import { SeriesRowProps } from "./SeriesRow"; | ||
| import { useSelector } from "react-redux"; | ||
| import { createTheme, ThemeProvider } from "@mui/material"; | ||
| type ChartProps = { | ||
| rows: SeriesRowProps[]; | ||
| hasDiff?: boolean; | ||
| chart?: any; | ||
| isChartGroup?: boolean; | ||
| chartData?: any; | ||
| }; | ||
|
|
||
| const CardinalityChart = forwardRef( | ||
| ({ chart = "", isChartGroup = false, chartData }: ChartProps, ref: any) => { | ||
| const [width, setWidth] = React.useState( | ||
| ref?.current?.offsetWidth || 0 | ||
| ); | ||
|
|
||
| const theme = useSelector((store: any) => store.theme); | ||
| const chartTheme = useMemo(() => { | ||
| return createTheme({ palette: { mode: theme } }); | ||
| }, [theme]); | ||
|
|
||
| useEffect(() => { | ||
| if (ref?.current?.offsetWidth) { | ||
| setWidth(ref?.current?.offsetWidth - 8); | ||
| } | ||
| }, [ref?.current]); | ||
|
|
||
| const chartRenderer = (isChartGroup, chartData) => { | ||
| if (chartData && isChartGroup && chart !== "") { | ||
| console.log(chartData?.valueTypesMapped[chart]?.names); | ||
| return ( | ||
| <BarChart | ||
| colors={["#babc00", "#ff5555"]} | ||
| xAxis={[ | ||
| { | ||
| id: "barCategories", | ||
| dataKey: "xAxisData", | ||
| data: [ | ||
| ...chartData?.valueTypesMapped[chart] | ||
| ?.names, | ||
| ], | ||
|
|
||
| scaleType: "band", | ||
| }, | ||
| ]} | ||
| series={[ | ||
| { | ||
| data: [ | ||
| ...chartData?.valueTypesMapped[chart] | ||
| ?.values, | ||
| ], | ||
| label: "current", | ||
| }, | ||
|
|
||
| { | ||
| data: [ | ||
| ...chartData?.valueTypesMapped[chart]?.diff, | ||
| ], | ||
| label: "previous", | ||
| }, | ||
| ]} | ||
| margin={{ bottom: 60, left: 60 }} | ||
| width={width} | ||
| height={300} | ||
| /> | ||
| ); | ||
| } else { | ||
| return ( | ||
| <BarChart | ||
| colors={["#babc00", "#ff5555"]} | ||
| xAxis={[ | ||
| { | ||
| id: "barCategories", | ||
| dataKey: "xAxisData", | ||
| data: [...chartData?.xAxisData], | ||
| scaleType: "band", | ||
| }, | ||
| ]} | ||
| series={[ | ||
| { | ||
| data: [...chartData?.valueData], | ||
| label: "current", | ||
| }, | ||
| { | ||
| data: [...chartData?.diffData], | ||
| label: "previous", | ||
| }, | ||
| ]} | ||
| margin={{ bottom: 60, left: 60 }} | ||
| width={width} | ||
| height={300} | ||
| /> | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| // console.log(chartData, "chartData"); | ||
| return ( | ||
| <ThemeProvider theme={chartTheme}> | ||
| {width > 0 && | ||
| chartData && | ||
| chartRenderer(isChartGroup, chartData)} | ||
| </ThemeProvider> | ||
| ); | ||
| } | ||
| ); | ||
|
|
||
| export default CardinalityChart; |
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,63 @@ | ||
| import React, { useRef } from "react"; | ||
| import { SeriesRowProps } from "./SeriesRow"; | ||
| import CardinalityChart from "./Chart"; | ||
| import { css, cx } from "@emotion/css"; | ||
| import { QrynTheme } from "@ui/theme/types"; | ||
| import styled from "@emotion/styled"; | ||
|
|
||
| export const CardinalityChartsContainer = styled.div` | ||
| display: flex; | ||
| flex: 1; | ||
| flex-wrap: wrap; | ||
| gap: 4px; | ||
| `; | ||
|
|
||
| export const CardinalityChartContainerStyles = (theme: QrynTheme) => css` | ||
| display: flex; | ||
| flex: 1; | ||
| flex-direction: column; | ||
| min-width: 33%; | ||
| border: 1px solid ${theme.neutral}; | ||
| .label { | ||
| display: flex; | ||
| padding: 6px 8px; | ||
| text-align: center; | ||
| } | ||
| `; | ||
|
|
||
| export type ChartContainerProps = { | ||
| rows: SeriesRowProps[]; | ||
| theme: QrynTheme; | ||
| hasDiff?: boolean; | ||
| chart?: any; | ||
| chartData?: any; | ||
| }; | ||
|
|
||
| const ChartContainer: React.FC<ChartContainerProps> = ({ | ||
| chart = "", | ||
| rows, | ||
| theme, | ||
| hasDiff = true, | ||
| chartData, | ||
| }) => { | ||
| const containerRef = useRef<any>(null); | ||
|
|
||
| return ( | ||
| <div | ||
| className={cx(CardinalityChartContainerStyles(theme))} | ||
| ref={containerRef} | ||
| > | ||
| {chart !== "" && <div className="label">{chart}</div>} | ||
| <CardinalityChart | ||
| chartData={chartData} | ||
| isChartGroup={chart !== ""} | ||
| chart={chart} | ||
| rows={rows} | ||
| hasDiff={hasDiff} | ||
| ref={containerRef} | ||
| /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ChartContainer; |
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,121 @@ | ||
| import React, { useMemo } from "react"; | ||
| import { type SeriesRowProps } from "./SeriesRow"; | ||
| import { type QrynTheme } from "@ui/theme/types"; | ||
| import { CardinalityChartsContainer } from "./ChartContainer"; | ||
| import ChartContainer from "./ChartContainer"; | ||
|
|
||
| type ChartsGroupProps = { | ||
| rows: SeriesRowProps[]; | ||
| theme: QrynTheme; | ||
| }; | ||
|
|
||
| export const formatValueTypesMapped = ( | ||
| valueTypesMapped: any, | ||
| xAxisData, | ||
| valueData, | ||
| diffData | ||
| ) => { | ||
| return valueTypesMapped.reduce((acc: any, curr: any, i: number) => { | ||
| let currName: any = xAxisData[i]?.split("=")[0]; | ||
| if (acc[currName] === undefined) { | ||
| acc[currName] = {}; | ||
| acc[currName].names = []; | ||
| acc[currName].values = []; | ||
| acc[currName].diff = []; | ||
| } | ||
| acc[currName].names.push(curr); | ||
| acc[currName].values.push(valueData[i]); | ||
| acc[currName].diff.push(diffData[i]); | ||
| return acc; | ||
| }, {}); | ||
| }; | ||
|
|
||
| export const formatChartProps = (rows: SeriesRowProps[]) => { | ||
| const xAxisData = rows?.map((row) => row.name); | ||
| const valueData = rows?.map((row) => row.value); | ||
| const diffData = rows?.map((row) => | ||
| row.diff < 0 ? row.diff * -1 : row.diff | ||
| ); | ||
| const labelTypes = rows?.map((row) => row.name.split("=")[0]); | ||
| const valueTypes: any = rows?.map((row) => row.name.split("=")[1]); | ||
|
|
||
| return { | ||
| xAxisData, | ||
| valueData, | ||
| diffData, | ||
| labelTypes, | ||
| valueTypes, | ||
| valueTypesMapped: {}, | ||
| valueTypesKeys: [], | ||
| }; | ||
| }; | ||
|
|
||
| export const useChartData = (rows: SeriesRowProps[]) => { | ||
| return useMemo(() => { | ||
| if (rows && rows?.length > 0) { | ||
| const { xAxisData, valueData, diffData, labelTypes, valueTypes } = | ||
| formatChartProps(rows); | ||
|
|
||
| let valueTypesMapped = {}; | ||
|
|
||
| if (valueTypes?.[0] !== undefined) { | ||
| valueTypesMapped = formatValueTypesMapped( | ||
| valueTypes, | ||
| xAxisData, | ||
| valueData, | ||
| diffData | ||
| ); | ||
| } | ||
|
|
||
| let valueTypesKeys = Object.keys(valueTypesMapped); | ||
|
|
||
| return { | ||
| xAxisData, | ||
| valueData, | ||
| diffData, | ||
| labelTypes, | ||
| valueTypes, | ||
| valueTypesMapped, | ||
| valueTypesKeys, | ||
| }; | ||
| } | ||
|
|
||
| return { | ||
| xAxisData: [], | ||
| valueData: [], | ||
| diffData: [], | ||
| labelTypes: [], | ||
| valueTypes: [], | ||
| valueTypesMapped: {}, | ||
| valueTypesKeys: [], | ||
| }; | ||
| }, [rows]); | ||
| }; | ||
|
|
||
| export const ChartsGroup: React.FC<ChartsGroupProps> = ({ rows, theme }) => { | ||
| const chartData = useChartData(rows); | ||
|
|
||
| return ( | ||
| <CardinalityChartsContainer> | ||
| {chartData?.valueTypes[0] !== undefined ? ( | ||
| chartData?.valueTypesKeys?.map((chart, id) => ( | ||
| <ChartContainer | ||
| key={id} | ||
| theme={theme} | ||
| rows={rows} | ||
| chart={chart} | ||
| hasDiff={false} | ||
| chartData={chartData} | ||
| /> | ||
| )) | ||
| ) : ( | ||
| <ChartContainer | ||
| theme={theme} | ||
| rows={rows} | ||
| chartData={chartData} | ||
| hasDiff={true} | ||
| /> | ||
| )} | ||
| </CardinalityChartsContainer> | ||
| ); | ||
| }; |
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
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
Oops, something went wrong.