From 6aa36d69da6f2b3b6c05c220b1c1594088e0474e Mon Sep 17 00:00:00 2001 From: Luca Cannarozzo Date: Thu, 27 Jul 2023 17:39:47 +0200 Subject: [PATCH 01/22] wip(line-charts): first try with nivo line charts --- src/stories/charts/line/_data.ts | 30 ++++ src/stories/charts/line/_types.ts | 28 +++ .../charts/line/assets/sentiment_0.svg | 11 ++ .../charts/line/assets/sentiment_1.svg | 11 ++ .../charts/line/assets/sentiment_2.svg | 13 ++ .../charts/line/assets/sentiment_3.svg | 13 ++ .../charts/line/assets/sentiment_4.svg | 13 ++ src/stories/charts/line/index.stories.tsx | 47 +++++ src/stories/charts/line/index.tsx | 170 ++++++++++++++++++ 9 files changed, 336 insertions(+) create mode 100644 src/stories/charts/line/_data.ts create mode 100644 src/stories/charts/line/_types.ts create mode 100644 src/stories/charts/line/assets/sentiment_0.svg create mode 100644 src/stories/charts/line/assets/sentiment_1.svg create mode 100644 src/stories/charts/line/assets/sentiment_2.svg create mode 100644 src/stories/charts/line/assets/sentiment_3.svg create mode 100644 src/stories/charts/line/assets/sentiment_4.svg create mode 100644 src/stories/charts/line/index.stories.tsx create mode 100644 src/stories/charts/line/index.tsx diff --git a/src/stories/charts/line/_data.ts b/src/stories/charts/line/_data.ts new file mode 100644 index 00000000..a5d48bdd --- /dev/null +++ b/src/stories/charts/line/_data.ts @@ -0,0 +1,30 @@ +export const data = [ + { + "id": "japan", + "color": "hsl(332, 70%, 50%)", + "data": [ + { + "x": "UC 4:Homepage", + "y": 2 + }, + { + "x": "Catalogo", + "y": 4 + }, + { + "x": "Scheda Prodotto", + "y": 3 + }, + { + "x": "Check Out", + "y": 3 + }, + + { + "x": "Conferma Ordine", + "y": 1 + }, + + ] + } +]; \ No newline at end of file diff --git a/src/stories/charts/line/_types.ts b/src/stories/charts/line/_types.ts new file mode 100644 index 00000000..216cdb9c --- /dev/null +++ b/src/stories/charts/line/_types.ts @@ -0,0 +1,28 @@ +import { ChartTooltipFunction } from "../_types"; +import { LegendType } from "../Legend"; + +type LineData = { + id: string; + data: { + x: string; + y: number; + }[]; +}; + +export interface LineChartProps { + data: LineData[]; + width?: string; + height?: string; + padding?: number; + colors?: string[]; + margin?: { + top?: number; + right?: number; + bottom?: number; + left?: number; + }; + axisLeftLabel?: string; + axisBottomLabel?: string; + tooltip?: ChartTooltipFunction; + legend?: LegendType | true; +} diff --git a/src/stories/charts/line/assets/sentiment_0.svg b/src/stories/charts/line/assets/sentiment_0.svg new file mode 100644 index 00000000..44862b0d --- /dev/null +++ b/src/stories/charts/line/assets/sentiment_0.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/stories/charts/line/assets/sentiment_1.svg b/src/stories/charts/line/assets/sentiment_1.svg new file mode 100644 index 00000000..4518e6fd --- /dev/null +++ b/src/stories/charts/line/assets/sentiment_1.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/stories/charts/line/assets/sentiment_2.svg b/src/stories/charts/line/assets/sentiment_2.svg new file mode 100644 index 00000000..f659ac8c --- /dev/null +++ b/src/stories/charts/line/assets/sentiment_2.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/stories/charts/line/assets/sentiment_3.svg b/src/stories/charts/line/assets/sentiment_3.svg new file mode 100644 index 00000000..03a6189a --- /dev/null +++ b/src/stories/charts/line/assets/sentiment_3.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/stories/charts/line/assets/sentiment_4.svg b/src/stories/charts/line/assets/sentiment_4.svg new file mode 100644 index 00000000..6894ec65 --- /dev/null +++ b/src/stories/charts/line/assets/sentiment_4.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/stories/charts/line/index.stories.tsx b/src/stories/charts/line/index.stories.tsx new file mode 100644 index 00000000..a462478d --- /dev/null +++ b/src/stories/charts/line/index.stories.tsx @@ -0,0 +1,47 @@ +import { ComponentMeta, Story } from "@storybook/react"; +import { LineChart } from "."; +import { LineChartProps } from "./_types"; +import { data } from "./_data"; + +const Template: Story = (args) => ( + +); + +export const Default = Template.bind({}); +Default.args = { + data: data, + legend: { columns: 4, marginTop: "200px" }, +}; + +export const WithCustomTooltip = Template.bind({}); +WithCustomTooltip.args = { + data: data, + tooltip: (node) => ( + <> +
+ {JSON.stringify(node.value)} +
+
+ {JSON.stringify(node.label)} +
+ {node.data?.custom_data && ( +
+ {JSON.stringify(node.data.custom_data)} +
+ )} + + ), +}; + +export default { + title: "Atoms/Charts/Line", + component: LineChart, +} as ComponentMeta; diff --git a/src/stories/charts/line/index.tsx b/src/stories/charts/line/index.tsx new file mode 100644 index 00000000..8879330e --- /dev/null +++ b/src/stories/charts/line/index.tsx @@ -0,0 +1,170 @@ +import { ResponsiveLine, Line } from "@nivo/line"; +import { LineChartProps } from "./_types"; +import { + CHARTS_COLOR_SCHEME_CATEGORICAL, + DEFAULT_CHARTS_THEME, +} from "../../theme/charts"; +import { ChartContainer } from "../ChartContainer"; +import styled, { ThemeContext } from "styled-components"; +import { MD } from "../../typography/typescale"; +import { useContext } from "react"; +import Legend from "../Legend"; +import { ReactComponent as S0 } from "./assets/sentiment_0.svg"; +import { ReactComponent as S1 } from "./assets/sentiment_1.svg"; +import { ReactComponent as S2 } from "./assets/sentiment_2.svg"; +import { ReactComponent as S3 } from "./assets/sentiment_3.svg"; +import { ReactComponent as S4 } from "./assets/sentiment_4.svg"; +import { DatumValue } from "@nivo/core"; +import { Button } from "../../buttons/button"; +import { Ellipsis } from "../../typography/ellipsis"; + +const Tooltip = styled.div` + padding: ${({ theme }) => theme.space.base * 3}px; + background: ${({ theme }) => theme.palette.white}; + box-shadow: ${({ theme }) => theme.shadows.boxShadow(theme)}; + max-width: 216px; +`; + +const DEFAULT_CHART_MARGINS = { top: 0, right: 0, bottom: 30, left: 30 }; + +const formatSentiment = (value: DatumValue) => { + switch (value as number) { + case 0: + return "Molto Negativo"; + case 1: + return "Negativo"; + case 2: + return "Neutrale"; + case 3: + return "Positivo"; + case 4: + return "Molto Positivo"; + default: + return ""; + } +}; + +const formatPoint = (value: DatumValue) => { + switch (value as number) { + case 1: + return ; + case 2: + return ; + case 3: + return ; + case 4: + return ; + case 5: + return ; + default: + return ""; + } +}; + +const formatAxisX = (value: DatumValue) => { + //Print only the first 10 characters + return ( + <> + {value.toString().substring(0, 5) + "..."} + {value as string} + + ); +}; + +const StyledLine = styled(Line)` + width: 100%; + height: 200px; +`; + +export const LineChart = ({ + data, + width, + height, + padding, + margin, + axisLeftLabel, + axisBottomLabel, + colors, + tooltip, + legend, +}: LineChartProps) => { + const theme = useContext(ThemeContext as React.Context); + + const actualColors = colors ?? CHARTS_COLOR_SCHEME_CATEGORICAL; + return ( + <> + + + <>{tooltip(node)} + // : ({ id, value, indexValue }) => ( + // + // + // {indexValue} - {id}:{" "} + // + // {value} + // + // + // + // ) + // } + margin={{ ...DEFAULT_CHART_MARGINS, ...margin }} + enableGridX + gridXValues={1} + yScale={{ + type: "linear", + min: 1, + max: 5, + nice: true, + }} + {...(axisBottomLabel && { + axisBottom: { + tickSize: 0, + tickPadding: 10, + tickValues: 3, + legend: axisBottomLabel, + legendOffset: + (margin?.bottom || DEFAULT_CHART_MARGINS.bottom) - 10, + legendPosition: "middle", + format: (value) => formatAxisX(value), + }, + })} + {...(axisLeftLabel && { + axisLeft: { + tickSize: 0, + tickPadding: 20, + legend: axisLeftLabel, + legendOffset: + ((margin?.left || DEFAULT_CHART_MARGINS.left) - 10) * -1, + legendPosition: "middle", + format: (value) => "", + }, + })} + layers={["grid", "axes", "lines", "points", "legends"]} + pointSymbol={({ datum, ...props }) => { + console.log(props); + return formatPoint(datum.y ?? ""); + }} + /> + + {/* + {legend ? ( + + ) : undefined} + */} + + ); +}; From 93d2bffc5849631731843dab6f8ee0af11209173 Mon Sep 17 00:00:00 2001 From: Marco Bonomo Date: Fri, 28 Jul 2023 17:58:47 +0200 Subject: [PATCH 02/22] =?UTF-8?q?=F0=9F=90=9B=20fix(=5Ftypes.ts):=20change?= =?UTF-8?q?=20value=20type=20in=20ChartTooltipFunction=20to=20accept=20str?= =?UTF-8?q?ing=20or=20number=20=F0=9F=90=9B=20fix(=5Fdata.ts):=20add=20cus?= =?UTF-8?q?tom=5Fdata=20property=20to=20data=20object=20=F0=9F=90=9B=20fix?= =?UTF-8?q?(=5Ftypes.ts):=20make=20y=20property=20in=20LineData=20optional?= =?UTF-8?q?=20=F0=9F=90=9B=20fix(index.stories.tsx):=20change=20width=20of?= =?UTF-8?q?=20tooltip=20divs=20=F0=9F=90=9B=20fix(index.tsx):=20remove=20u?= =?UTF-8?q?nused=20imports=20and=20components=20=E2=9C=A8=20feat(index.tsx?= =?UTF-8?q?):=20add=20support=20for=20isScrollable=20prop=20in=20LineChart?= =?UTF-8?q?=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/charts/_types.ts | 2 +- src/stories/charts/line/_data.ts | 13 +- src/stories/charts/line/_types.ts | 4 +- src/stories/charts/line/index.stories.tsx | 13 +- src/stories/charts/line/index.tsx | 174 ++++++++++++---------- 5 files changed, 118 insertions(+), 88 deletions(-) diff --git a/src/stories/charts/_types.ts b/src/stories/charts/_types.ts index be2e6bb6..4b9d9c27 100644 --- a/src/stories/charts/_types.ts +++ b/src/stories/charts/_types.ts @@ -5,7 +5,7 @@ export type ChartTooltipFunction = ({ label, data, }: { - value: number; + value: string | number; label: string | number; data?: Record; }) => React.ReactNode; diff --git a/src/stories/charts/line/_data.ts b/src/stories/charts/line/_data.ts index a5d48bdd..2acd4d0c 100644 --- a/src/stories/charts/line/_data.ts +++ b/src/stories/charts/line/_data.ts @@ -4,8 +4,12 @@ export const data = [ "color": "hsl(332, 70%, 50%)", "data": [ { - "x": "UC 4:Homepage", - "y": 2 + "x": "start", + }, + { + "x": "Homepage", + "y": 2, + "custom_data": "cazzate" }, { "x": "Catalogo", @@ -19,12 +23,13 @@ export const data = [ "x": "Check Out", "y": 3 }, - { "x": "Conferma Ordine", "y": 1 }, - + { + "x": "end", + }, ] } ]; \ No newline at end of file diff --git a/src/stories/charts/line/_types.ts b/src/stories/charts/line/_types.ts index 216cdb9c..a0d1820b 100644 --- a/src/stories/charts/line/_types.ts +++ b/src/stories/charts/line/_types.ts @@ -5,7 +5,8 @@ type LineData = { id: string; data: { x: string; - y: number; + y?: number; + custom_data?: string; }[]; }; @@ -25,4 +26,5 @@ export interface LineChartProps { axisBottomLabel?: string; tooltip?: ChartTooltipFunction; legend?: LegendType | true; + isScrollable?: boolean; } diff --git a/src/stories/charts/line/index.stories.tsx b/src/stories/charts/line/index.stories.tsx index a462478d..a852529f 100644 --- a/src/stories/charts/line/index.stories.tsx +++ b/src/stories/charts/line/index.stories.tsx @@ -2,15 +2,16 @@ import { ComponentMeta, Story } from "@storybook/react"; import { LineChart } from "."; import { LineChartProps } from "./_types"; import { data } from "./_data"; +import { theme } from "../../theme"; const Template: Story = (args) => ( ); @@ -26,14 +27,14 @@ WithCustomTooltip.args = { data: data, tooltip: (node) => ( <> -
+
{JSON.stringify(node.value)}
-
+
{JSON.stringify(node.label)}
{node.data?.custom_data && ( -
+
{JSON.stringify(node.data.custom_data)}
)} diff --git a/src/stories/charts/line/index.tsx b/src/stories/charts/line/index.tsx index 8879330e..c52ee572 100644 --- a/src/stories/charts/line/index.tsx +++ b/src/stories/charts/line/index.tsx @@ -1,4 +1,4 @@ -import { ResponsiveLine, Line } from "@nivo/line"; +import { ResponsiveLine } from "@nivo/line"; import { LineChartProps } from "./_types"; import { CHARTS_COLOR_SCHEME_CATEGORICAL, @@ -8,15 +8,17 @@ import { ChartContainer } from "../ChartContainer"; import styled, { ThemeContext } from "styled-components"; import { MD } from "../../typography/typescale"; import { useContext } from "react"; -import Legend from "../Legend"; import { ReactComponent as S0 } from "./assets/sentiment_0.svg"; import { ReactComponent as S1 } from "./assets/sentiment_1.svg"; import { ReactComponent as S2 } from "./assets/sentiment_2.svg"; import { ReactComponent as S3 } from "./assets/sentiment_3.svg"; import { ReactComponent as S4 } from "./assets/sentiment_4.svg"; import { DatumValue } from "@nivo/core"; -import { Button } from "../../buttons/button"; -import { Ellipsis } from "../../typography/ellipsis"; +import { getColor } from "../../theme/utils"; + +const Point = styled.g` + transform: translate(-13px, -13px); +`; const Tooltip = styled.div` padding: ${({ theme }) => theme.space.base * 3}px; @@ -25,19 +27,34 @@ const Tooltip = styled.div` max-width: 216px; `; +const ScrollingContainer = styled.div<{ + isScrollable?: boolean; +}>` + width: 100%; + height: 100%; + position: relative; + overflow: hidden; + + ${({ isScrollable }) => + isScrollable && + ` + overflow-x: scroll; + `} +`; + const DEFAULT_CHART_MARGINS = { top: 0, right: 0, bottom: 30, left: 30 }; const formatSentiment = (value: DatumValue) => { switch (value as number) { - case 0: - return "Molto Negativo"; case 1: - return "Negativo"; + return "Molto Negativo"; case 2: - return "Neutrale"; + return "Negativo"; case 3: - return "Positivo"; + return "Neutrale"; case 4: + return "Positivo"; + case 5: return "Molto Positivo"; default: return ""; @@ -62,109 +79,114 @@ const formatPoint = (value: DatumValue) => { }; const formatAxisX = (value: DatumValue) => { + // This is to avoid printing the first and last value of the axis to make room for the chart (2 empty columns) + if (!value || value === "start" || value === "end") return ""; + //Print only the first 10 characters return ( <> - {value.toString().substring(0, 5) + "..."} + {value.toString().length > 15 ? value.toString().substring(0, 15) + "..." : value.toString()} {value as string} ); }; -const StyledLine = styled(Line)` - width: 100%; - height: 200px; -`; - export const LineChart = ({ data, width, height, - padding, margin, axisLeftLabel, axisBottomLabel, colors, tooltip, - legend, + isScrollable, }: LineChartProps) => { const theme = useContext(ThemeContext as React.Context); const actualColors = colors ?? CHARTS_COLOR_SCHEME_CATEGORICAL; return ( - <> + - <>{tooltip(node)} - // : ({ id, value, indexValue }) => ( - // - // - // {indexValue} - {id}:{" "} - // - // {value} - // - // - // - // ) - // } + data={data} margin={{ ...DEFAULT_CHART_MARGINS, ...margin }} - enableGridX gridXValues={1} + gridYValues={5} yScale={{ type: "linear", - min: 1, + min: 0, max: 5, - nice: true, }} - {...(axisBottomLabel && { - axisBottom: { - tickSize: 0, - tickPadding: 10, - tickValues: 3, - legend: axisBottomLabel, - legendOffset: - (margin?.bottom || DEFAULT_CHART_MARGINS.bottom) - 10, - legendPosition: "middle", - format: (value) => formatAxisX(value), - }, - })} - {...(axisLeftLabel && { - axisLeft: { - tickSize: 0, - tickPadding: 20, - legend: axisLeftLabel, - legendOffset: - ((margin?.left || DEFAULT_CHART_MARGINS.left) - 10) * -1, - legendPosition: "middle", - format: (value) => "", - }, - })} - layers={["grid", "axes", "lines", "points", "legends"]} - pointSymbol={({ datum, ...props }) => { - console.log(props); - return formatPoint(datum.y ?? ""); + axisBottom={{ + tickSize: 0, + tickPadding: 20, + legend: axisBottomLabel, + legendOffset: + (margin?.bottom || DEFAULT_CHART_MARGINS.bottom) - 10, + legendPosition: "middle", + format: (value) => formatAxisX(value), + }} + axisLeft={{ + tickSize: 0, + tickPadding: 20, + legend: axisLeftLabel, + legendOffset: + ((margin?.left || DEFAULT_CHART_MARGINS.left) - 10) * -1, + legendPosition: "middle", + format: (value) => "", }} + pointSymbol={({ datum }) => { + return {formatPoint(datum.y ?? "")}; + }} + tooltip={tooltip ? (node) => <>{tooltip({ + value: formatSentiment(node.point.data.y), + label: node.point.data.x.toString(), + data: { + custom_data: data[0].data[node.point.index].custom_data ?? undefined, + } + })} : (node) => { + return ( + + {formatSentiment(node.point.data.y)} + + ); + }} + useMesh + enableCrosshair={false} /> - {/* - {legend ? ( - - ) : undefined} - */} - + ); }; From cc4640a74c917acab3419a52509d8c3a1b197e93 Mon Sep 17 00:00:00 2001 From: Marco Bonomo Date: Mon, 31 Jul 2023 11:31:26 +0200 Subject: [PATCH 03/22] =?UTF-8?q?=F0=9F=90=9B=20fix(line/index.tsx):=20cha?= =?UTF-8?q?nge=20max=20value=20of=20yScale=20from=205=20to=206=20=E2=9C=A8?= =?UTF-8?q?=20feat(line/index.tsx):=20add=20curve=3D"monotoneX"=20prop=20t?= =?UTF-8?q?o=20Line=20component=20=E2=9C=A8=20feat(line/index.tsx):=20add?= =?UTF-8?q?=20markers=20to=20Line=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/charts/line/index.tsx | 56 ++++++++++++++++++++++++++++++- 1 file changed, 55 insertions(+), 1 deletion(-) diff --git a/src/stories/charts/line/index.tsx b/src/stories/charts/line/index.tsx index c52ee572..65288329 100644 --- a/src/stories/charts/line/index.tsx +++ b/src/stories/charts/line/index.tsx @@ -15,6 +15,7 @@ import { ReactComponent as S3 } from "./assets/sentiment_3.svg"; import { ReactComponent as S4 } from "./assets/sentiment_4.svg"; import { DatumValue } from "@nivo/core"; import { getColor } from "../../theme/utils"; +import { get } from "http"; const Point = styled.g` transform: translate(-13px, -13px); @@ -139,6 +140,7 @@ export const LineChart = ({ }, }, }} + curve="monotoneX" colors={actualColors} data={data} margin={{ ...DEFAULT_CHART_MARGINS, ...margin }} @@ -147,7 +149,7 @@ export const LineChart = ({ yScale={{ type: "linear", min: 0, - max: 5, + max: 6, }} axisBottom={{ tickSize: 0, @@ -183,6 +185,58 @@ export const LineChart = ({ ); }} + markers={[ + { + axis: 'y', + legend: 'Neutral', + legendPosition: 'bottom-left', + lineStyle: { + stroke: theme.palette.grey[600], + strokeWidth: 1, + }, + textStyle: { + fill: theme.palette.grey[600], + fontSize: theme.fontSizes.sm, + }, + value: 3 + }, + { + axis: 'y', + legendPosition: 'bottom-left', + lineStyle: { + stroke: "white", + strokeWidth: 2, + }, + value: 0 + }, + { + axis: 'y', + legendPosition: 'bottom-left', + lineStyle: { + stroke: "white", + strokeWidth: 2, + }, + value: 6 + }, + { + axis: 'x', + legendPosition: 'bottom-left', + lineStyle: { + stroke: "white", + strokeWidth: 2, + }, + value: "start" + }, + { + axis: 'x', + legendPosition: 'bottom-left', + lineStyle: { + stroke: "white", + strokeWidth: 2, + }, + value: "end" + } + ]} useMesh enableCrosshair={false} /> From 3dda49a8322a8f8d302999db9e21411320299044 Mon Sep 17 00:00:00 2001 From: Marco Bonomo Date: Mon, 31 Jul 2023 11:31:39 +0200 Subject: [PATCH 04/22] =?UTF-8?q?=F0=9F=90=9B=20fix(line/=5Fdata.ts):=20ad?= =?UTF-8?q?d=20missing=20custom=5Fdata=20property=20to=20data=20object=20?= =?UTF-8?q?=F0=9F=90=9B=20fix(line/index.stories.tsx):=20remove=20axisBott?= =?UTF-8?q?omLabel=20prop=20from=20LineChart=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/charts/line/_data.ts | 5 +++++ src/stories/charts/line/index.stories.tsx | 1 - 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/stories/charts/line/_data.ts b/src/stories/charts/line/_data.ts index 2acd4d0c..66fa560f 100644 --- a/src/stories/charts/line/_data.ts +++ b/src/stories/charts/line/_data.ts @@ -27,6 +27,11 @@ export const data = [ "x": "Conferma Ordine", "y": 1 }, + { + "x": "Carrello", + "y": 5, + "custom_data": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl quis tincidunt ultricies, nunc nisl lacinia nunc, quis lacinia nisl nun" + }, { "x": "end", }, diff --git a/src/stories/charts/line/index.stories.tsx b/src/stories/charts/line/index.stories.tsx index a852529f..e14e783c 100644 --- a/src/stories/charts/line/index.stories.tsx +++ b/src/stories/charts/line/index.stories.tsx @@ -8,7 +8,6 @@ const Template: Story = (args) => ( Date: Mon, 31 Jul 2023 20:17:09 +0200 Subject: [PATCH 05/22] =?UTF-8?q?=F0=9F=94=A5=20refactor(line/index.tsx):?= =?UTF-8?q?=20remove=20unused=20import=20statement=20for=20'get'=20functio?= =?UTF-8?q?n=20from=20'http'=20module?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/charts/line/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/stories/charts/line/index.tsx b/src/stories/charts/line/index.tsx index 65288329..8d64e22d 100644 --- a/src/stories/charts/line/index.tsx +++ b/src/stories/charts/line/index.tsx @@ -15,7 +15,6 @@ import { ReactComponent as S3 } from "./assets/sentiment_3.svg"; import { ReactComponent as S4 } from "./assets/sentiment_4.svg"; import { DatumValue } from "@nivo/core"; import { getColor } from "../../theme/utils"; -import { get } from "http"; const Point = styled.g` transform: translate(-13px, -13px); From c48f809fbeb11ae1a90ce1f8e825f90c2d7852bd Mon Sep 17 00:00:00 2001 From: Marco Bonomo Date: Wed, 30 Aug 2023 17:40:53 +0200 Subject: [PATCH 06/22] =?UTF-8?q?=F0=9F=8E=A8=20style(globalStyle.ts):=20a?= =?UTF-8?q?dd=20height=20property=20to=20::-webkit-scrollbar=20?= =?UTF-8?q?=F0=9F=90=9B=20fix(globalStyle.ts):=20fix=20typo=20in=20::-webk?= =?UTF-8?q?it-scrollbar=20height=20property?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/shared/globalStyle.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/stories/shared/globalStyle.ts b/src/stories/shared/globalStyle.ts index 25ddd276..5e079997 100644 --- a/src/stories/shared/globalStyle.ts +++ b/src/stories/shared/globalStyle.ts @@ -12,6 +12,7 @@ const GlobalStyle = createGlobalStyle` ::-webkit-scrollbar { width: 10px; + height: 10px; } ::-webkit-scrollbar-track { From 8b3cf6236357a5d66ac9c6583ec982caf69cbc9b Mon Sep 17 00:00:00 2001 From: Marco Bonomo Date: Thu, 31 Aug 2023 11:35:34 +0200 Subject: [PATCH 07/22] =?UTF-8?q?=F0=9F=90=9B=20fix(=5Fdata.ts):=20change?= =?UTF-8?q?=20data=20variable=20to=20be=20of=20type=20Data=20=F0=9F=90=9B?= =?UTF-8?q?=20fix(=5Ftypes.ts):=20change=20LineData=20type=20to=20be=20an?= =?UTF-8?q?=20object=20instead=20of=20an=20array=20=F0=9F=90=9B=20fix(inde?= =?UTF-8?q?x.stories.tsx):=20update=20component=20name=20and=20add=20missi?= =?UTF-8?q?ng=20imports=20=E2=9C=A8=20feat(index.stories.tsx):=20add=20tit?= =?UTF-8?q?le=20and=20description=20to=20LineChart=20component=20=E2=9C=A8?= =?UTF-8?q?=20feat(index.stories.tsx):=20add=20custom=20tooltip=20function?= =?UTF-8?q?ality=20to=20LineChart=20component=20=E2=9C=A8=20feat(index.sto?= =?UTF-8?q?ries.tsx):=20add=20scrollable=20LineChart=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🐛 fix(line/index.tsx): import SliceTooltipProps from @nivo/line ✨ feat(line/index.tsx): add support for interactive tooltips using SliceTooltipProps 🔧 chore(line/index.tsx): remove unused axisLeftLabel and axisBottomLabel props 🎨 style(line/index.tsx): update styling for ScrollingContainer component 🔧 chore(line/index.tsx): remove useMesh prop from ResponsiveLine component ✨ feat(line/index.tsx): enable interactivity and slices in ResponsiveLine component --- src/stories/charts/line/_data.ts | 80 +++++------ src/stories/charts/line/_types.ts | 2 +- src/stories/charts/line/index.stories.tsx | 153 +++++++++++++++++---- src/stories/charts/line/index.tsx | 156 +++++++++++++++------- 4 files changed, 279 insertions(+), 112 deletions(-) diff --git a/src/stories/charts/line/_data.ts b/src/stories/charts/line/_data.ts index 66fa560f..eec0b6ea 100644 --- a/src/stories/charts/line/_data.ts +++ b/src/stories/charts/line/_data.ts @@ -1,40 +1,40 @@ -export const data = [ - { - "id": "japan", - "color": "hsl(332, 70%, 50%)", - "data": [ - { - "x": "start", - }, - { - "x": "Homepage", - "y": 2, - "custom_data": "cazzate" - }, - { - "x": "Catalogo", - "y": 4 - }, - { - "x": "Scheda Prodotto", - "y": 3 - }, - { - "x": "Check Out", - "y": 3 - }, - { - "x": "Conferma Ordine", - "y": 1 - }, - { - "x": "Carrello", - "y": 5, - "custom_data": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl quis tincidunt ultricies, nunc nisl lacinia nunc, quis lacinia nisl nun" - }, - { - "x": "end", - }, - ] - } -]; \ No newline at end of file +export type Data = { + id: string; + data: { + x: string; + y: number; + custom_data?: string; + }[]; +}; + +export const data: Data = { + id: "sentiment-chart", + data: [ + { + "x": "Homepage", + "y": 2, + "custom_data": "cazzate" + }, + { + "x": "Catalogo", + "y": 4 + }, + { + "x": "Scheda Prodotto", + "y": 3 + }, + { + "x": "Check Out", + "y": 3 + }, + { + "x": "Conferma Ordine", + "y": 1 + }, + { + "x": "Carrello", + "y": 5, + "custom_data": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl quis tincidunt ultricies, nunc nisl lacinia nunc, quis lacinia nisl nun" + }, + ] +}; \ No newline at end of file diff --git a/src/stories/charts/line/_types.ts b/src/stories/charts/line/_types.ts index a0d1820b..2b396b59 100644 --- a/src/stories/charts/line/_types.ts +++ b/src/stories/charts/line/_types.ts @@ -11,7 +11,7 @@ type LineData = { }; export interface LineChartProps { - data: LineData[]; + data: LineData; width?: string; height?: string; padding?: number; diff --git a/src/stories/charts/line/index.stories.tsx b/src/stories/charts/line/index.stories.tsx index e14e783c..c8cd07db 100644 --- a/src/stories/charts/line/index.stories.tsx +++ b/src/stories/charts/line/index.stories.tsx @@ -3,45 +3,148 @@ import { LineChart } from "."; import { LineChartProps } from "./_types"; import { data } from "./_data"; import { theme } from "../../theme"; +import styled from "styled-components"; +import { ContainerCard } from "../../cards"; +import { DatumValue } from "@nivo/core"; +import { ReactComponent as S0 } from "./assets/sentiment_0.svg"; +import { ReactComponent as S1 } from "./assets/sentiment_1.svg"; +import { ReactComponent as S2 } from "./assets/sentiment_2.svg"; +import { ReactComponent as S3 } from "./assets/sentiment_3.svg"; +import { ReactComponent as S4 } from "./assets/sentiment_4.svg"; +import { Span } from "../../typography/span"; +import { Paragraph } from "../../typography/paragraph"; +import { SM } from "../../typography/typescale"; + +const Container = styled.div` + width: 100%; + padding: 0 ${({ theme }) => theme.space.xxl}; +`; + +const Label = styled.p` + color: ${({ theme }) => theme.palette.blue[600]}; + font-size: ${({ theme }) => theme.fontSizes.md}; + padding: ${({ theme }) => theme.space.md}; +`; + +const VerticalLabel = styled(Label)` + position: absolute; + top: 50%; + left: 0; + transform: translate(0, -50%) rotate(-90deg); + transform-origin: 0 0; + z-index: 2; +`; + +const HorizontalLabel = styled(Label)` + text-align: center; +`; + +const Tooltip = styled.div` + background-color: white; + border: 1px solid ${({ theme }) => theme.palette.grey[300]}; + border-radius: ${({ theme }) => theme.borderRadii.md}; + padding: ${({ theme }) => theme.space.sm}; + box-shadow: ${theme.shadows.boxShadow(theme)}; + max-width: 200px; + overflow: hidden; + break-word: break-all; + white-space: no-wrap; +`; + +const formatPoint = (value: DatumValue) => { + switch (value as number) { + case 1: + return ; + case 2: + return ; + case 3: + return ; + case 4: + return ; + case 5: + return ; + default: + return ""; + } +}; const Template: Story = (args) => ( - + <> +

Line Chart

+

+ This is a line chart. It is a wrapper around the{" "} + Nivo Line Chart component. +

+

+ The Nivo Line Chart is a wrapper around the{" "} + D3 Line Chart component. +

+ + +); + +const TemplateScrollable: Story = (args) => ( + <> + + + Vertical Label + + Horizontal Label + + + ); export const Default = Template.bind({}); Default.args = { data: data, - legend: { columns: 4, marginTop: "200px" }, }; export const WithCustomTooltip = Template.bind({}); WithCustomTooltip.args = { data: data, - tooltip: (node) => ( - <> -
- {JSON.stringify(node.value)} -
-
- {JSON.stringify(node.label)} -
- {node.data?.custom_data && ( -
- {JSON.stringify(node.data.custom_data)} + tooltip: (node) => { + const { data, label: useCase, value: sentimentText } = node; + const sentimentValue = parseInt(data?.yFormatted as string); + + return ( + +
+ {formatPoint(sentimentValue)}{sentimentText}
- )} - - ), +
+ {useCase} + {data?.customData && ( + +
+ {data?.customData} + + )} + + ) + } +}; + +export const Scrollable = TemplateScrollable.bind({}); +Scrollable.args = { + data: data, }; export default { - title: "Atoms/Charts/Line", + title: "Atoms/Charts/Sentiment", component: LineChart, -} as ComponentMeta; +} as ComponentMeta; \ No newline at end of file diff --git a/src/stories/charts/line/index.tsx b/src/stories/charts/line/index.tsx index 8d64e22d..958c22bd 100644 --- a/src/stories/charts/line/index.tsx +++ b/src/stories/charts/line/index.tsx @@ -1,4 +1,4 @@ -import { ResponsiveLine } from "@nivo/line"; +import { ResponsiveLine, SliceTooltipProps } from "@nivo/line"; import { LineChartProps } from "./_types"; import { CHARTS_COLOR_SCHEME_CATEGORICAL, @@ -15,31 +15,49 @@ import { ReactComponent as S3 } from "./assets/sentiment_3.svg"; import { ReactComponent as S4 } from "./assets/sentiment_4.svg"; import { DatumValue } from "@nivo/core"; import { getColor } from "../../theme/utils"; +import { Tooltip } from "../../tooltip"; const Point = styled.g` transform: translate(-13px, -13px); `; -const Tooltip = styled.div` - padding: ${({ theme }) => theme.space.base * 3}px; - background: ${({ theme }) => theme.palette.white}; - box-shadow: ${({ theme }) => theme.shadows.boxShadow(theme)}; - max-width: 216px; -`; - const ScrollingContainer = styled.div<{ isScrollable?: boolean; }>` width: 100%; height: 100%; position: relative; - overflow: hidden; ${({ isScrollable }) => isScrollable && ` overflow-x: scroll; `} + + /* Show dotted lines */ + svg > g > g:nth-child(2) > line { + stroke-dasharray: 2; + } + + /* Show first and last vertical lines */ + svg > g > g:first-child > line:first-child { + transform: translate(2px, 0); + stroke-dasharray: 2; + } + + svg > g > g:first-child > line:last-child { + transform: translate(-2px, 0); + stroke-dasharray: 2; + } + + /* Show first and last horizontal lines */ + svg > g > g:nth-child(2) > line:first-child { + transform: translate(0, -6px); + } + + svg > g > g:nth-child(2) > line:last-child { + transform: translate(0, 2px); + } `; const DEFAULT_CHART_MARGINS = { top: 0, right: 0, bottom: 30, left: 30 }; @@ -96,8 +114,6 @@ export const LineChart = ({ width, height, margin, - axisLeftLabel, - axisBottomLabel, colors, tooltip, isScrollable, @@ -106,25 +122,22 @@ export const LineChart = ({ const actualColors = colors ?? CHARTS_COLOR_SCHEME_CATEGORICAL; return ( - + formatAxisX(value), }} axisLeft={{ tickSize: 0, - tickPadding: 20, - legend: axisLeftLabel, - legendOffset: - ((margin?.left || DEFAULT_CHART_MARGINS.left) - 10) * -1, - legendPosition: "middle", - format: (value) => "", + tickPadding: 10, + format: () => "", }} pointSymbol={({ datum }) => { return {formatPoint(datum.y ?? "")}; }} - tooltip={tooltip ? (node) => <>{tooltip({ - value: formatSentiment(node.point.data.y), - label: node.point.data.x.toString(), - data: { - custom_data: data[0].data[node.point.index].custom_data ?? undefined, - } - })} : (node) => { + // tooltip={tooltip ? (node) => { + // const point = node.point.data; + + // return ( + // <> + // {tooltip({ + // value: formatSentiment(point.y), + // label: point.x.toString(), + // data: { + // custom_data: data.data[node.point.index].custom_data ?? undefined, + // yValue: point.y.toString() ?? "", + // } + // })} + // + // ) + // } : (node) => { + // return ( + // + // {formatSentiment(node.point.data.y)} + // + // ); + // }} + sliceTooltip={tooltip ? (e) => { + const point: SliceTooltipProps["slice"]["points"][number]["data"] & { + custom_data?: string; + } = e.slice.points[0].data; + + return ( + <> + {tooltip({ + value: formatSentiment(point.y), + label: point.xFormatted, + data: { + customData: point.custom_data ?? undefined, + yFormatted: point.yFormatted, + } + })} + + ) + } : (e) => { + const point: SliceTooltipProps["slice"]["points"][number]["data"] & { + custom_data?: string; + } = e.slice.points[0].data; + return ( - - {formatSentiment(node.point.data.y)} + + {formatSentiment(point.y)} ); }} @@ -190,11 +252,12 @@ export const LineChart = ({ legend: 'Neutral', legendPosition: 'bottom-left', lineStyle: { - stroke: theme.palette.grey[600], + stroke: theme.palette.blue[600], strokeWidth: 1, + strokeDasharray: 2, }, textStyle: { - fill: theme.palette.grey[600], + fill: theme.palette.blue[600], fontSize: theme.fontSizes.sm, }, value: 3 @@ -236,8 +299,9 @@ export const LineChart = ({ value: "end" } ]} - useMesh enableCrosshair={false} + isInteractive + enableSlices="y" /> From 711a0b9cb4590138209471f5f0e3df5676c7c747 Mon Sep 17 00:00:00 2001 From: Marco Bonomo Date: Thu, 31 Aug 2023 11:46:12 +0200 Subject: [PATCH 08/22] =?UTF-8?q?=F0=9F=90=9B=20fix(line/=5Fdata.ts):=20ch?= =?UTF-8?q?ange=20id=20value=20from=20"sentiment-chart"=20to=20"Sentiment"?= =?UTF-8?q?=20=F0=9F=90=9B=20fix(line/index.tsx):=20fix=20enableSlices=20v?= =?UTF-8?q?alue=20from=20"y"=20to=20"x"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/charts/line/_data.ts | 2 +- src/stories/charts/line/index.tsx | 18 ++---------------- 2 files changed, 3 insertions(+), 17 deletions(-) diff --git a/src/stories/charts/line/_data.ts b/src/stories/charts/line/_data.ts index eec0b6ea..8d01fc1d 100644 --- a/src/stories/charts/line/_data.ts +++ b/src/stories/charts/line/_data.ts @@ -8,7 +8,7 @@ export type Data = { }; export const data: Data = { - id: "sentiment-chart", + id: "Sentiment", data: [ { "x": "Homepage", diff --git a/src/stories/charts/line/index.tsx b/src/stories/charts/line/index.tsx index 958c22bd..9d4a34a7 100644 --- a/src/stories/charts/line/index.tsx +++ b/src/stories/charts/line/index.tsx @@ -231,21 +231,7 @@ export const LineChart = ({ })} ) - } : (e) => { - const point: SliceTooltipProps["slice"]["points"][number]["data"] & { - custom_data?: string; - } = e.slice.points[0].data; - - return ( - - {formatSentiment(point.y)} - - ); - }} + } : undefined} markers={[ { axis: 'y', @@ -301,7 +287,7 @@ export const LineChart = ({ ]} enableCrosshair={false} isInteractive - enableSlices="y" + enableSlices="x" /> From f50e02992b0266666a67c3ec9572da94df8f795c Mon Sep 17 00:00:00 2001 From: Marco Bonomo Date: Thu, 31 Aug 2023 11:46:45 +0200 Subject: [PATCH 09/22] =?UTF-8?q?=F0=9F=94=A5=20refactor(line/index.tsx):?= =?UTF-8?q?=20remove=20unused=20imports=20and=20code?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🔥 refactor(line/index.tsx): remove unused import of MD from typography/typescale 🔥 refactor(line/index.tsx): remove unused import of Tooltip from tooltip 🔥 refactor(line/index.tsx): remove unused code for Point component --- src/stories/charts/line/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/stories/charts/line/index.tsx b/src/stories/charts/line/index.tsx index 9d4a34a7..ae816d36 100644 --- a/src/stories/charts/line/index.tsx +++ b/src/stories/charts/line/index.tsx @@ -6,7 +6,6 @@ import { } from "../../theme/charts"; import { ChartContainer } from "../ChartContainer"; import styled, { ThemeContext } from "styled-components"; -import { MD } from "../../typography/typescale"; import { useContext } from "react"; import { ReactComponent as S0 } from "./assets/sentiment_0.svg"; import { ReactComponent as S1 } from "./assets/sentiment_1.svg"; @@ -15,7 +14,6 @@ import { ReactComponent as S3 } from "./assets/sentiment_3.svg"; import { ReactComponent as S4 } from "./assets/sentiment_4.svg"; import { DatumValue } from "@nivo/core"; import { getColor } from "../../theme/utils"; -import { Tooltip } from "../../tooltip"; const Point = styled.g` transform: translate(-13px, -13px); From 221a0a49c72c92f27efdb953a6e88036fa481fa7 Mon Sep 17 00:00:00 2001 From: Marco Bonomo Date: Thu, 31 Aug 2023 13:51:28 +0200 Subject: [PATCH 10/22] =?UTF-8?q?=F0=9F=90=9B=20fix(=5Fdata.ts):=20update?= =?UTF-8?q?=20custom=5Fdata=20values=20in=20data=20array=20=E2=9C=A8=20fea?= =?UTF-8?q?t(=5Ftypes.ts):=20remove=20isScrollable=20prop=20from=20LineCha?= =?UTF-8?q?rtProps=20interface=20=E2=9C=A8=20feat(index.stories.tsx):=20re?= =?UTF-8?q?move=20unused=20imports=20and=20update=20styles=20in=20Template?= =?UTF-8?q?=20component=20=E2=9C=A8=20feat(index.stories.tsx):=20update=20?= =?UTF-8?q?Scrollable=20story=20to=20use=20Template=20component=20?= =?UTF-8?q?=F0=9F=90=9B=20fix(index.tsx):=20update=20tooltip=20prop=20in?= =?UTF-8?q?=20LineChart=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/charts/line/_data.ts | 39 ++++++++++++-- src/stories/charts/line/_types.ts | 1 - src/stories/charts/line/index.stories.tsx | 62 ++++++++------------- src/stories/charts/line/index.tsx | 66 ++++++++--------------- 4 files changed, 78 insertions(+), 90 deletions(-) diff --git a/src/stories/charts/line/_data.ts b/src/stories/charts/line/_data.ts index 8d01fc1d..54fc54c4 100644 --- a/src/stories/charts/line/_data.ts +++ b/src/stories/charts/line/_data.ts @@ -13,28 +13,57 @@ export const data: Data = { { "x": "Homepage", "y": 2, - "custom_data": "cazzate" + "custom_data": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl quis tincidunt ultricies, nunc nisl lacinia nunc, quis lacinia nisl nun" }, { "x": "Catalogo", - "y": 4 + "y": 4, + "custom_data": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl quis tincidunt ultricies, nunc nisl lacinia nunc, quis lacinia nisl nun" }, { "x": "Scheda Prodotto", - "y": 3 + "y": 3, + "custom_data": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl quis tincidunt ultricies, nunc nisl lacinia nunc, quis lacinia nisl nun" }, { "x": "Check Out", - "y": 3 + "y": 3, + "custom_data": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl quis tincidunt ultricies, nunc nisl lacinia nunc, quis lacinia nisl nun" }, { "x": "Conferma Ordine", - "y": 1 + "y": 1, + "custom_data": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl quis tincidunt ultricies, nunc nisl lacinia nunc, quis lacinia nisl nun" }, { "x": "Carrello", "y": 5, "custom_data": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl quis tincidunt ultricies, nunc nisl lacinia nunc, quis lacinia nisl nun" }, + { + "x": "Catalogo 2", + "y": 4, + "custom_data": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl quis tincidunt ultricies, nunc nisl lacinia nunc, quis lacinia nisl nun" + }, + { + "x": "Scheda Prodotto 2", + "y": 3, + "custom_data": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl quis tincidunt ultricies, nunc nisl lacinia nunc, quis lacinia nisl nun" + }, + { + "x": "Check Out 2", + "y": 3, + "custom_data": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl quis tincidunt ultricies, nunc nisl lacinia nunc, quis lacinia nisl nun" + }, + { + "x": "Conferma Ordine 2", + "y": 1, + "custom_data": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl quis tincidunt ultricies, nunc nisl lacinia nunc, quis lacinia nisl nun" + }, + { + "x": "Carrello 2", + "y": 5, + "custom_data": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl quis tincidunt ultricies, nunc nisl lacinia nunc, quis lacinia nisl nun" + }, ] }; \ No newline at end of file diff --git a/src/stories/charts/line/_types.ts b/src/stories/charts/line/_types.ts index 2b396b59..20390ec8 100644 --- a/src/stories/charts/line/_types.ts +++ b/src/stories/charts/line/_types.ts @@ -26,5 +26,4 @@ export interface LineChartProps { axisBottomLabel?: string; tooltip?: ChartTooltipFunction; legend?: LegendType | true; - isScrollable?: boolean; } diff --git a/src/stories/charts/line/index.stories.tsx b/src/stories/charts/line/index.stories.tsx index c8cd07db..cf5b7e4e 100644 --- a/src/stories/charts/line/index.stories.tsx +++ b/src/stories/charts/line/index.stories.tsx @@ -12,18 +12,17 @@ import { ReactComponent as S2 } from "./assets/sentiment_2.svg"; import { ReactComponent as S3 } from "./assets/sentiment_3.svg"; import { ReactComponent as S4 } from "./assets/sentiment_4.svg"; import { Span } from "../../typography/span"; -import { Paragraph } from "../../typography/paragraph"; import { SM } from "../../typography/typescale"; -const Container = styled.div` +const ScrollingContainer = styled.div` width: 100%; - padding: 0 ${({ theme }) => theme.space.xxl}; + overflow-x: scroll; `; const Label = styled.p` color: ${({ theme }) => theme.palette.blue[600]}; font-size: ${({ theme }) => theme.fontSizes.md}; - padding: ${({ theme }) => theme.space.md}; + padding: ${({ theme }) => theme.space.sm}; `; const VerticalLabel = styled(Label)` @@ -45,10 +44,8 @@ const Tooltip = styled.div` border-radius: ${({ theme }) => theme.borderRadii.md}; padding: ${({ theme }) => theme.space.sm}; box-shadow: ${theme.shadows.boxShadow(theme)}; - max-width: 200px; - overflow: hidden; - break-word: break-all; - white-space: no-wrap; + max-width: 230px; + white-space: normal; `; const formatPoint = (value: DatumValue) => { @@ -70,41 +67,28 @@ const formatPoint = (value: DatumValue) => { const Template: Story = (args) => ( <> -

Line Chart

-

- This is a line chart. It is a wrapper around the{" "} - Nivo Line Chart component. -

-

- The Nivo Line Chart is a wrapper around the{" "} - D3 Line Chart component. -

- - -); - -const TemplateScrollable: Story = (args) => ( - <> - - - Vertical Label + +

Line Chart

+

+ This is a line chart. It is a wrapper around the{" "} + Nivo Line Chart component. +

+

+ The Nivo Line Chart is a wrapper around the{" "} + D3 Line Chart component. +

+
+ Vertical Label + - Horizontal Label - + + Horizontal Label ); @@ -119,7 +103,7 @@ WithCustomTooltip.args = { data: data, tooltip: (node) => { const { data, label: useCase, value: sentimentText } = node; - const sentimentValue = parseInt(data?.yFormatted as string); + const sentimentValue = parseInt(data?.yValue as string); return ( @@ -139,7 +123,7 @@ WithCustomTooltip.args = { } }; -export const Scrollable = TemplateScrollable.bind({}); +export const Scrollable = Template.bind({}); Scrollable.args = { data: data, }; diff --git a/src/stories/charts/line/index.tsx b/src/stories/charts/line/index.tsx index ae816d36..c14dbede 100644 --- a/src/stories/charts/line/index.tsx +++ b/src/stories/charts/line/index.tsx @@ -19,18 +19,9 @@ const Point = styled.g` transform: translate(-13px, -13px); `; -const ScrollingContainer = styled.div<{ - isScrollable?: boolean; -}>` +const LineContainer = styled.div` width: 100%; height: 100%; - position: relative; - - ${({ isScrollable }) => - isScrollable && - ` - overflow-x: scroll; - `} /* Show dotted lines */ svg > g > g:nth-child(2) > line { @@ -114,22 +105,17 @@ export const LineChart = ({ margin, colors, tooltip, - isScrollable, }: LineChartProps) => { const theme = useContext(ThemeContext as React.Context); const actualColors = colors ?? CHARTS_COLOR_SCHEME_CATEGORICAL; return ( - + { return {formatPoint(datum.y ?? "")}; }} - // tooltip={tooltip ? (node) => { - // const point = node.point.data; + tooltip={tooltip ? (node) => { + const point = node.point.data; - // return ( - // <> - // {tooltip({ - // value: formatSentiment(point.y), - // label: point.x.toString(), - // data: { - // custom_data: data.data[node.point.index].custom_data ?? undefined, - // yValue: point.y.toString() ?? "", - // } - // })} - // - // ) - // } : (node) => { - // return ( - // - // {formatSentiment(node.point.data.y)} - // - // ); - // }} + return ( + <> + {tooltip({ + value: formatSentiment(point.y), + label: point.x.toString(), + data: { + customData: data.data[node.point.index].custom_data ?? undefined, + yValue: point.y.toString() ?? "", + } + })} + + ) + } : undefined} sliceTooltip={tooltip ? (e) => { const point: SliceTooltipProps["slice"]["points"][number]["data"] & { custom_data?: string; @@ -224,7 +200,7 @@ export const LineChart = ({ label: point.xFormatted, data: { customData: point.custom_data ?? undefined, - yFormatted: point.yFormatted, + yValue: point.yFormatted, } })} @@ -288,6 +264,6 @@ export const LineChart = ({ enableSlices="x" /> - + ); }; From e42631ee0f239b5ddd1cfd23d7b7c31248b4c006 Mon Sep 17 00:00:00 2001 From: Marco Bonomo Date: Thu, 31 Aug 2023 17:14:31 +0200 Subject: [PATCH 11/22] =?UTF-8?q?=F0=9F=90=9B=20fix(line/=5Fdata.ts):=20fi?= =?UTF-8?q?x=20typo=20in=20custom=5Fdata=20value=20=F0=9F=97=91=EF=B8=8F?= =?UTF-8?q?=20remove(line/assets/sentiment=5F0.svg):=20remove=20unused=20S?= =?UTF-8?q?VG=20file?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🎨 style(sentiment_1.svg): update fill color of sentiment icon to #E9979B 🎨 style(sentiment_2.svg): update fill color for sentiment icon 🎨 chore(sentiment_3.svg): update fill color to #FFD7A4 🎨 chore(sentiment_4.svg): update fill color to #B3E8D9 🆕 feat(sentiment_5.svg): add new SVG file for sentiment value 5 🔧 chore(index.stories.tsx): update line chart component to include new sentiment SVG 🔨 refactor(line/index.tsx): remove unused sentiment_0.svg import ✨ feat(line/index.tsx): add support for sentiment_5.svg 🔨 refactor(line/index.tsx): change LineContainer to extend ChartContainer 🔨 refactor(line/index.tsx): remove width and height props from LineContainer 🔨 refactor(line/index.tsx): remove style prop from LineContainer 🔨 refactor(line/index.tsx): remove unused imports 🔨 refactor(line/index.tsx): reformat code for better readability 🔨 refactor(line/index.tsx): reorganize props for ResponsiveLine component 🔨 refactor(line/index.tsx): reorganize markers array 🔨 refactor(line/index.tsx): remove unused props from ResponsiveLine component --- src/stories/charts/line/_data.ts | 2 +- .../charts/line/assets/sentiment_0.svg | 11 - .../charts/line/assets/sentiment_1.svg | 8 +- .../charts/line/assets/sentiment_2.svg | 10 +- .../charts/line/assets/sentiment_3.svg | 12 +- .../charts/line/assets/sentiment_4.svg | 16 +- .../charts/line/assets/sentiment_5.svg | 13 + src/stories/charts/line/index.stories.tsx | 84 ++--- src/stories/charts/line/index.tsx | 305 +++++++++--------- 9 files changed, 232 insertions(+), 229 deletions(-) delete mode 100644 src/stories/charts/line/assets/sentiment_0.svg create mode 100644 src/stories/charts/line/assets/sentiment_5.svg diff --git a/src/stories/charts/line/_data.ts b/src/stories/charts/line/_data.ts index 54fc54c4..8f696efc 100644 --- a/src/stories/charts/line/_data.ts +++ b/src/stories/charts/line/_data.ts @@ -23,7 +23,7 @@ export const data: Data = { { "x": "Scheda Prodotto", "y": 3, - "custom_data": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl quis tincidunt ultricies, nunc nisl lacinia nunc, quis lacinia nisl nun" + "custom_data": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl quis tincidunt ultricies, nunc nisl lacinia nunc, quis lacinia nisl nunc" }, { "x": "Check Out", diff --git a/src/stories/charts/line/assets/sentiment_0.svg b/src/stories/charts/line/assets/sentiment_0.svg deleted file mode 100644 index 44862b0d..00000000 --- a/src/stories/charts/line/assets/sentiment_0.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/src/stories/charts/line/assets/sentiment_1.svg b/src/stories/charts/line/assets/sentiment_1.svg index 4518e6fd..44862b0d 100644 --- a/src/stories/charts/line/assets/sentiment_1.svg +++ b/src/stories/charts/line/assets/sentiment_1.svg @@ -1,10 +1,10 @@ - - - + + + - + diff --git a/src/stories/charts/line/assets/sentiment_2.svg b/src/stories/charts/line/assets/sentiment_2.svg index f659ac8c..4518e6fd 100644 --- a/src/stories/charts/line/assets/sentiment_2.svg +++ b/src/stories/charts/line/assets/sentiment_2.svg @@ -1,12 +1,10 @@ - - - - - + + + - + diff --git a/src/stories/charts/line/assets/sentiment_3.svg b/src/stories/charts/line/assets/sentiment_3.svg index 03a6189a..f659ac8c 100644 --- a/src/stories/charts/line/assets/sentiment_3.svg +++ b/src/stories/charts/line/assets/sentiment_3.svg @@ -1,12 +1,12 @@ - - - - - + + + + + - + diff --git a/src/stories/charts/line/assets/sentiment_4.svg b/src/stories/charts/line/assets/sentiment_4.svg index 6894ec65..03a6189a 100644 --- a/src/stories/charts/line/assets/sentiment_4.svg +++ b/src/stories/charts/line/assets/sentiment_4.svg @@ -1,13 +1,13 @@ - - - - - - + + + + + + - - + + diff --git a/src/stories/charts/line/assets/sentiment_5.svg b/src/stories/charts/line/assets/sentiment_5.svg new file mode 100644 index 00000000..6894ec65 --- /dev/null +++ b/src/stories/charts/line/assets/sentiment_5.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/stories/charts/line/index.stories.tsx b/src/stories/charts/line/index.stories.tsx index cf5b7e4e..bf80a928 100644 --- a/src/stories/charts/line/index.stories.tsx +++ b/src/stories/charts/line/index.stories.tsx @@ -6,13 +6,15 @@ import { theme } from "../../theme"; import styled from "styled-components"; import { ContainerCard } from "../../cards"; import { DatumValue } from "@nivo/core"; -import { ReactComponent as S0 } from "./assets/sentiment_0.svg"; import { ReactComponent as S1 } from "./assets/sentiment_1.svg"; import { ReactComponent as S2 } from "./assets/sentiment_2.svg"; import { ReactComponent as S3 } from "./assets/sentiment_3.svg"; import { ReactComponent as S4 } from "./assets/sentiment_4.svg"; -import { Span } from "../../typography/span"; -import { SM } from "../../typography/typescale"; +import { ReactComponent as S5 } from "./assets/sentiment_5.svg"; +import { LG, SM } from "../../typography/typescale"; +import { Grid } from "../../grid/grid"; +import { Row } from "../../grid/row"; +import { Col } from "../../grid/col"; const ScrollingContainer = styled.div` width: 100%; @@ -26,12 +28,9 @@ const Label = styled.p` `; const VerticalLabel = styled(Label)` - position: absolute; - top: 50%; - left: 0; - transform: translate(0, -50%) rotate(-90deg); - transform-origin: 0 0; - z-index: 2; + writing-mode: vertical-rl; + text-align: center; + margin: auto; `; const HorizontalLabel = styled(Label)` @@ -44,22 +43,22 @@ const Tooltip = styled.div` border-radius: ${({ theme }) => theme.borderRadii.md}; padding: ${({ theme }) => theme.space.sm}; box-shadow: ${theme.shadows.boxShadow(theme)}; - max-width: 230px; + max-width: 270px; white-space: normal; `; const formatPoint = (value: DatumValue) => { switch (value as number) { case 1: - return ; + return ; case 2: - return ; + return ; case 3: - return ; + return ; case 4: - return ; + return ; case 5: - return ; + return ; default: return ""; } @@ -67,28 +66,44 @@ const formatPoint = (value: DatumValue) => { const Template: Story = (args) => ( <> - -

Line Chart

+ + Sentiment Chart +

This is a line chart. It is a wrapper around the{" "} Nivo Line Chart component.

The Nivo Line Chart is a wrapper around the{" "} - D3 Line Chart component. + D3 library.


- Vertical Label - - - - Horizontal Label + + + + Vertical Label + + + + + + + + + + +
+ Horizontal Label +
+ + + ); @@ -102,16 +117,14 @@ export const WithCustomTooltip = Template.bind({}); WithCustomTooltip.args = { data: data, tooltip: (node) => { - const { data, label: useCase, value: sentimentText } = node; + const { data, label: cluster } = node; const sentimentValue = parseInt(data?.yValue as string); return (
- {formatPoint(sentimentValue)}{sentimentText} + {formatPoint(sentimentValue)}{cluster}
-
- {useCase} {data?.customData && (
@@ -123,11 +136,6 @@ WithCustomTooltip.args = { } }; -export const Scrollable = Template.bind({}); -Scrollable.args = { - data: data, -}; - export default { title: "Atoms/Charts/Sentiment", component: LineChart, diff --git a/src/stories/charts/line/index.tsx b/src/stories/charts/line/index.tsx index c14dbede..df6927da 100644 --- a/src/stories/charts/line/index.tsx +++ b/src/stories/charts/line/index.tsx @@ -7,11 +7,11 @@ import { import { ChartContainer } from "../ChartContainer"; import styled, { ThemeContext } from "styled-components"; import { useContext } from "react"; -import { ReactComponent as S0 } from "./assets/sentiment_0.svg"; import { ReactComponent as S1 } from "./assets/sentiment_1.svg"; import { ReactComponent as S2 } from "./assets/sentiment_2.svg"; import { ReactComponent as S3 } from "./assets/sentiment_3.svg"; import { ReactComponent as S4 } from "./assets/sentiment_4.svg"; +import { ReactComponent as S5 } from "./assets/sentiment_5.svg"; import { DatumValue } from "@nivo/core"; import { getColor } from "../../theme/utils"; @@ -19,10 +19,7 @@ const Point = styled.g` transform: translate(-13px, -13px); `; -const LineContainer = styled.div` - width: 100%; - height: 100%; - +const LineContainer = styled(ChartContainer)` /* Show dotted lines */ svg > g > g:nth-child(2) > line { stroke-dasharray: 2; @@ -71,15 +68,15 @@ const formatSentiment = (value: DatumValue) => { const formatPoint = (value: DatumValue) => { switch (value as number) { case 1: - return ; - case 2: return ; - case 3: + case 2: return ; - case 4: + case 3: return ; - case 5: + case 4: return ; + case 5: + return ; default: return ""; } @@ -110,160 +107,158 @@ export const LineChart = ({ const actualColors = colors ?? CHARTS_COLOR_SCHEME_CATEGORICAL; return ( - - - + formatAxisX(value), - }} - axisLeft={{ - tickSize: 0, - tickPadding: 10, - format: () => "", - }} - pointSymbol={({ datum }) => { - return {formatPoint(datum.y ?? "")}; - }} - tooltip={tooltip ? (node) => { - const point = node.point.data; - - return ( - <> - {tooltip({ - value: formatSentiment(point.y), - label: point.x.toString(), - data: { - customData: data.data[node.point.index].custom_data ?? undefined, - yValue: point.y.toString() ?? "", - } - })} - - ) - } : undefined} - sliceTooltip={tooltip ? (e) => { - const point: SliceTooltipProps["slice"]["points"][number]["data"] & { - custom_data?: string; - } = e.slice.points[0].data; - - return ( - <> - {tooltip({ - value: formatSentiment(point.y), - label: point.xFormatted, - data: { - customData: point.custom_data ?? undefined, - yValue: point.yFormatted, - } - })} - - ) - } : undefined} - markers={[ + }, + }} + curve="monotoneX" + colors={actualColors} + data={[{ + id: data.id, + data: [ { - axis: 'y', - legend: 'Neutral', - legendPosition: 'bottom-left', - lineStyle: { - stroke: theme.palette.blue[600], - strokeWidth: 1, - strokeDasharray: 2, - }, - textStyle: { - fill: theme.palette.blue[600], - fontSize: theme.fontSizes.sm, - }, - value: 3 + x: "start", }, + ...data.data, { - axis: 'y', - legendPosition: 'bottom-left', - lineStyle: { - stroke: "white", - strokeWidth: 2, - }, - value: 0 + x: "end", + } + ] + } + ]} + margin={{ ...DEFAULT_CHART_MARGINS, ...margin }} + gridXValues={1} + gridYValues={5} + yScale={{ + type: "linear", + min: 0, + max: 6, + }} + axisBottom={{ + tickSize: 0, + tickPadding: 10, + format: (value) => formatAxisX(value), + }} + axisLeft={{ + tickSize: 0, + tickPadding: 10, + format: () => "", + }} + pointSymbol={({ datum }) => { + return {formatPoint(datum.y ?? "")}; + }} + tooltip={tooltip ? (node) => { + const point = node.point.data; + + return ( + <> + {tooltip({ + value: formatSentiment(point.y), + label: point.x.toString(), + data: { + customData: data.data[node.point.index].custom_data ?? undefined, + yValue: point.y.toString() ?? "", + } + })} + + ) + } : undefined} + sliceTooltip={tooltip ? (e) => { + const point: SliceTooltipProps["slice"]["points"][number]["data"] & { + custom_data?: string; + } = e.slice.points[0].data; + + return ( + <> + {tooltip({ + value: formatSentiment(point.y), + label: point.xFormatted, + data: { + customData: point.custom_data ?? undefined, + yValue: point.yFormatted, + } + })} + + ) + } : undefined} + markers={[ + { + axis: 'y', + legend: 'Neutral', + legendPosition: 'bottom-left', + lineStyle: { + stroke: theme.palette.blue[600], + strokeWidth: 1, + strokeDasharray: 2, }, - { - axis: 'y', - legendPosition: 'bottom-left', - lineStyle: { - stroke: "white", - strokeWidth: 2, - }, - value: 6 + textStyle: { + fill: theme.palette.blue[600], + fontSize: theme.fontSizes.sm, }, - { - axis: 'x', - legendPosition: 'bottom-left', - lineStyle: { - stroke: "white", - strokeWidth: 2, - }, - value: "start" + value: 3 + }, + { + axis: 'y', + legendPosition: 'bottom-left', + lineStyle: { + stroke: "white", + strokeWidth: 2, }, - { - axis: 'x', - legendPosition: 'bottom-left', - lineStyle: { - stroke: "white", - strokeWidth: 2, - }, - value: "end" - } - ]} - enableCrosshair={false} - isInteractive - enableSlices="x" - /> - + value: 0 + }, + { + axis: 'y', + legendPosition: 'bottom-left', + lineStyle: { + stroke: "white", + strokeWidth: 2, + }, + value: 6 + }, + { + axis: 'x', + legendPosition: 'bottom-left', + lineStyle: { + stroke: "white", + strokeWidth: 2, + }, + value: "start" + }, + { + axis: 'x', + legendPosition: 'bottom-left', + lineStyle: { + stroke: "white", + strokeWidth: 2, + }, + value: "end" + } + ]} + enableCrosshair={false} + isInteractive + enableSlices="x" + /> ); }; From 099aeaff7c10514457c1618e4b136c730fd59c44 Mon Sep 17 00:00:00 2001 From: Marco Bonomo Date: Fri, 1 Sep 2023 11:25:19 +0200 Subject: [PATCH 12/22] =?UTF-8?q?=F0=9F=90=9B=20fix(line/=5Ftypes.ts):=20r?= =?UTF-8?q?ename=20LineData=20type=20to=20SentimentData=20=E2=9C=A8=20feat?= =?UTF-8?q?(line/index.stories.tsx):=20rename=20LineChart=20to=20Sentiment?= =?UTF-8?q?Chart=20and=20update=20imports=20and=20types=20=F0=9F=90=9B=20f?= =?UTF-8?q?ix(line/index.tsx):=20rename=20LineChart=20to=20SentimentChart?= =?UTF-8?q?=20and=20update=20imports=20and=20types?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/charts/line/_types.ts | 6 +- src/stories/charts/line/index.stories.tsx | 45 ++-- src/stories/charts/line/index.tsx | 303 +++++++++++----------- 3 files changed, 177 insertions(+), 177 deletions(-) diff --git a/src/stories/charts/line/_types.ts b/src/stories/charts/line/_types.ts index 20390ec8..c0491ca9 100644 --- a/src/stories/charts/line/_types.ts +++ b/src/stories/charts/line/_types.ts @@ -1,7 +1,7 @@ import { ChartTooltipFunction } from "../_types"; import { LegendType } from "../Legend"; -type LineData = { +type SentimentData = { id: string; data: { x: string; @@ -10,8 +10,8 @@ type LineData = { }[]; }; -export interface LineChartProps { - data: LineData; +export interface SentimentChartProps { + data: SentimentData; width?: string; height?: string; padding?: number; diff --git a/src/stories/charts/line/index.stories.tsx b/src/stories/charts/line/index.stories.tsx index bf80a928..0a613d34 100644 --- a/src/stories/charts/line/index.stories.tsx +++ b/src/stories/charts/line/index.stories.tsx @@ -1,6 +1,6 @@ -import { ComponentMeta, Story } from "@storybook/react"; -import { LineChart } from "."; -import { LineChartProps } from "./_types"; +import { Meta, StoryFn } from "@storybook/react"; +import { SentimentChart } from "."; +import { SentimentChartProps } from "./_types"; import { data } from "./_data"; import { theme } from "../../theme"; import styled from "styled-components"; @@ -11,15 +11,11 @@ import { ReactComponent as S2 } from "./assets/sentiment_2.svg"; import { ReactComponent as S3 } from "./assets/sentiment_3.svg"; import { ReactComponent as S4 } from "./assets/sentiment_4.svg"; import { ReactComponent as S5 } from "./assets/sentiment_5.svg"; -import { LG, SM } from "../../typography/typescale"; +import { LG, MD } from "../../typography/typescale"; import { Grid } from "../../grid/grid"; import { Row } from "../../grid/row"; import { Col } from "../../grid/col"; - -const ScrollingContainer = styled.div` - width: 100%; - overflow-x: scroll; -`; +import { Span } from "../../typography/span"; const Label = styled.p` color: ${({ theme }) => theme.palette.blue[600]}; @@ -64,13 +60,13 @@ const formatPoint = (value: DatumValue) => { } }; -const Template: Story = (args) => ( +const Template: StoryFn = (args) => ( <> Sentiment Chart

- This is a line chart. It is a wrapper around the{" "} + This is the sentiment chart. It is a wrapper around the{" "} Nivo Line Chart component.

@@ -84,15 +80,13 @@ const Template: Story = (args) => ( Vertical Label - - - + @@ -123,13 +117,12 @@ WithCustomTooltip.args = { return (

- {formatPoint(sentimentValue)}{cluster} + {formatPoint(sentimentValue)}{cluster}
{data?.customData && ( - -
+ {data?.customData} - + )} ) @@ -138,5 +131,5 @@ WithCustomTooltip.args = { export default { title: "Atoms/Charts/Sentiment", - component: LineChart, -} as ComponentMeta; \ No newline at end of file + component: SentimentChart, +} as Meta; \ No newline at end of file diff --git a/src/stories/charts/line/index.tsx b/src/stories/charts/line/index.tsx index df6927da..c7d6c485 100644 --- a/src/stories/charts/line/index.tsx +++ b/src/stories/charts/line/index.tsx @@ -1,5 +1,5 @@ import { ResponsiveLine, SliceTooltipProps } from "@nivo/line"; -import { LineChartProps } from "./_types"; +import { SentimentChartProps } from "./_types"; import { CHARTS_COLOR_SCHEME_CATEGORICAL, DEFAULT_CHARTS_THEME, @@ -19,7 +19,12 @@ const Point = styled.g` transform: translate(-13px, -13px); `; -const LineContainer = styled(ChartContainer)` +const ScrollingContainer = styled.div` + width: 100%; + overflow-x: scroll; +`; + +const SentimentContainer = styled(ChartContainer)` /* Show dotted lines */ svg > g > g:nth-child(2) > line { stroke-dasharray: 2; @@ -95,170 +100,172 @@ const formatAxisX = (value: DatumValue) => { ); }; -export const LineChart = ({ +export const SentimentChart = ({ data, width, height, margin, colors, tooltip, -}: LineChartProps) => { +}: SentimentChartProps) => { const theme = useContext(ThemeContext as React.Context); const actualColors = colors ?? CHARTS_COLOR_SCHEME_CATEGORICAL; return ( - - + + formatAxisX(value), - }} - axisLeft={{ - tickSize: 0, - tickPadding: 10, - format: () => "", - }} - pointSymbol={({ datum }) => { - return {formatPoint(datum.y ?? "")}; - }} - tooltip={tooltip ? (node) => { - const point = node.point.data; + }} + curve="monotoneX" + colors={actualColors} + data={[{ + id: data.id, + data: [ + { + x: "start", + }, + ...data.data, + { + x: "end", + } + ] + } + ]} + margin={{ ...DEFAULT_CHART_MARGINS, ...margin }} + gridXValues={1} + gridYValues={5} + yScale={{ + type: "linear", + min: 0, + max: 6, + }} + axisBottom={{ + tickSize: 0, + tickPadding: 10, + format: (value) => formatAxisX(value), + }} + axisLeft={{ + tickSize: 0, + tickPadding: 10, + format: () => "", + }} + pointSymbol={({ datum }) => { + return {formatPoint(datum.y ?? "")}; + }} + tooltip={tooltip ? (node) => { + const point = node.point.data; - return ( - <> - {tooltip({ - value: formatSentiment(point.y), - label: point.x.toString(), - data: { - customData: data.data[node.point.index].custom_data ?? undefined, - yValue: point.y.toString() ?? "", - } - })} - - ) - } : undefined} - sliceTooltip={tooltip ? (e) => { - const point: SliceTooltipProps["slice"]["points"][number]["data"] & { - custom_data?: string; - } = e.slice.points[0].data; + return ( + <> + {tooltip({ + value: formatSentiment(point.y), + label: point.x.toString(), + data: { + customData: data.data[node.point.index].custom_data ?? undefined, + yValue: point.y.toString() ?? "", + } + })} + + ) + } : undefined} + sliceTooltip={tooltip ? (e) => { + const point: SliceTooltipProps["slice"]["points"][number]["data"] & { + custom_data?: string; + } = e.slice.points[0].data; - return ( - <> - {tooltip({ - value: formatSentiment(point.y), - label: point.xFormatted, - data: { - customData: point.custom_data ?? undefined, - yValue: point.yFormatted, - } - })} - - ) - } : undefined} - markers={[ - { - axis: 'y', - legend: 'Neutral', - legendPosition: 'bottom-left', - lineStyle: { - stroke: theme.palette.blue[600], - strokeWidth: 1, - strokeDasharray: 2, - }, - textStyle: { - fill: theme.palette.blue[600], - fontSize: theme.fontSizes.sm, - }, - value: 3 - }, - { - axis: 'y', - legendPosition: 'bottom-left', - lineStyle: { - stroke: "white", - strokeWidth: 2, + return ( + <> + {tooltip({ + value: formatSentiment(point.y), + label: point.xFormatted, + data: { + customData: point.custom_data ?? undefined, + yValue: point.yFormatted, + } + })} + + ) + } : undefined} + markers={[ + { + axis: 'y', + legend: 'Neutral', + legendPosition: 'bottom-left', + lineStyle: { + stroke: theme.palette.blue[600], + strokeWidth: 1, + strokeDasharray: 2, + }, + textStyle: { + fill: theme.palette.blue[600], + fontSize: theme.fontSizes.sm, + }, + value: 3 }, - value: 0 - }, - { - axis: 'y', - legendPosition: 'bottom-left', - lineStyle: { - stroke: "white", - strokeWidth: 2, + { + axis: 'y', + legendPosition: 'bottom-left', + lineStyle: { + stroke: "white", + strokeWidth: 2, + }, + value: 0 }, - value: 6 - }, - { - axis: 'x', - legendPosition: 'bottom-left', - lineStyle: { - stroke: "white", - strokeWidth: 2, + { + axis: 'y', + legendPosition: 'bottom-left', + lineStyle: { + stroke: "white", + strokeWidth: 2, + }, + value: 6 }, - value: "start" - }, - { - axis: 'x', - legendPosition: 'bottom-left', - lineStyle: { - stroke: "white", - strokeWidth: 2, + { + axis: 'x', + legendPosition: 'bottom-left', + lineStyle: { + stroke: "white", + strokeWidth: 2, + }, + value: "start" }, - value: "end" - } - ]} - enableCrosshair={false} - isInteractive - enableSlices="x" - /> - + { + axis: 'x', + legendPosition: 'bottom-left', + lineStyle: { + stroke: "white", + strokeWidth: 2, + }, + value: "end" + } + ]} + enableCrosshair={false} + isInteractive + enableSlices="x" + /> + + ); }; From 4e35dc40dfff5f2e6080e23126b4572efd8aaf04 Mon Sep 17 00:00:00 2001 From: Marco Bonomo Date: Fri, 1 Sep 2023 11:27:06 +0200 Subject: [PATCH 13/22] =?UTF-8?q?=F0=9F=90=9B=20fix(line):=20remove=20unus?= =?UTF-8?q?ed=20colors=20prop=20in=20index.stories.tsx=20=F0=9F=90=9B=20fi?= =?UTF-8?q?x(line):=20use=20theme=20palette=20grey[600]=20for=20colors=20i?= =?UTF-8?q?n=20index.tsx?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/charts/line/index.stories.tsx | 1 - src/stories/charts/line/index.tsx | 4 +--- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/stories/charts/line/index.stories.tsx b/src/stories/charts/line/index.stories.tsx index 0a613d34..97c7def6 100644 --- a/src/stories/charts/line/index.stories.tsx +++ b/src/stories/charts/line/index.stories.tsx @@ -84,7 +84,6 @@ const Template: StoryFn = (args) => ( width={`${data.data.length * 150}px`} height="350px" margin={{ top: 50, right: 0, bottom: 50, left: 0 }} - colors={[theme.palette.grey[600]]} {...args} /> diff --git a/src/stories/charts/line/index.tsx b/src/stories/charts/line/index.tsx index c7d6c485..c9db2da6 100644 --- a/src/stories/charts/line/index.tsx +++ b/src/stories/charts/line/index.tsx @@ -105,12 +105,10 @@ export const SentimentChart = ({ width, height, margin, - colors, tooltip, }: SentimentChartProps) => { const theme = useContext(ThemeContext as React.Context); - const actualColors = colors ?? CHARTS_COLOR_SCHEME_CATEGORICAL; return ( Date: Fri, 1 Sep 2023 12:41:03 +0200 Subject: [PATCH 14/22] refactor(sentiment): rename files --- src/stories/charts/{line => sentiment}/_data.ts | 0 src/stories/charts/{line => sentiment}/_types.ts | 0 src/stories/charts/{line => sentiment}/assets/sentiment_1.svg | 0 src/stories/charts/{line => sentiment}/assets/sentiment_2.svg | 0 src/stories/charts/{line => sentiment}/assets/sentiment_3.svg | 0 src/stories/charts/{line => sentiment}/assets/sentiment_4.svg | 0 src/stories/charts/{line => sentiment}/assets/sentiment_5.svg | 0 src/stories/charts/{line => sentiment}/index.stories.tsx | 0 src/stories/charts/{line => sentiment}/index.tsx | 0 9 files changed, 0 insertions(+), 0 deletions(-) rename src/stories/charts/{line => sentiment}/_data.ts (100%) rename src/stories/charts/{line => sentiment}/_types.ts (100%) rename src/stories/charts/{line => sentiment}/assets/sentiment_1.svg (100%) rename src/stories/charts/{line => sentiment}/assets/sentiment_2.svg (100%) rename src/stories/charts/{line => sentiment}/assets/sentiment_3.svg (100%) rename src/stories/charts/{line => sentiment}/assets/sentiment_4.svg (100%) rename src/stories/charts/{line => sentiment}/assets/sentiment_5.svg (100%) rename src/stories/charts/{line => sentiment}/index.stories.tsx (100%) rename src/stories/charts/{line => sentiment}/index.tsx (100%) diff --git a/src/stories/charts/line/_data.ts b/src/stories/charts/sentiment/_data.ts similarity index 100% rename from src/stories/charts/line/_data.ts rename to src/stories/charts/sentiment/_data.ts diff --git a/src/stories/charts/line/_types.ts b/src/stories/charts/sentiment/_types.ts similarity index 100% rename from src/stories/charts/line/_types.ts rename to src/stories/charts/sentiment/_types.ts diff --git a/src/stories/charts/line/assets/sentiment_1.svg b/src/stories/charts/sentiment/assets/sentiment_1.svg similarity index 100% rename from src/stories/charts/line/assets/sentiment_1.svg rename to src/stories/charts/sentiment/assets/sentiment_1.svg diff --git a/src/stories/charts/line/assets/sentiment_2.svg b/src/stories/charts/sentiment/assets/sentiment_2.svg similarity index 100% rename from src/stories/charts/line/assets/sentiment_2.svg rename to src/stories/charts/sentiment/assets/sentiment_2.svg diff --git a/src/stories/charts/line/assets/sentiment_3.svg b/src/stories/charts/sentiment/assets/sentiment_3.svg similarity index 100% rename from src/stories/charts/line/assets/sentiment_3.svg rename to src/stories/charts/sentiment/assets/sentiment_3.svg diff --git a/src/stories/charts/line/assets/sentiment_4.svg b/src/stories/charts/sentiment/assets/sentiment_4.svg similarity index 100% rename from src/stories/charts/line/assets/sentiment_4.svg rename to src/stories/charts/sentiment/assets/sentiment_4.svg diff --git a/src/stories/charts/line/assets/sentiment_5.svg b/src/stories/charts/sentiment/assets/sentiment_5.svg similarity index 100% rename from src/stories/charts/line/assets/sentiment_5.svg rename to src/stories/charts/sentiment/assets/sentiment_5.svg diff --git a/src/stories/charts/line/index.stories.tsx b/src/stories/charts/sentiment/index.stories.tsx similarity index 100% rename from src/stories/charts/line/index.stories.tsx rename to src/stories/charts/sentiment/index.stories.tsx diff --git a/src/stories/charts/line/index.tsx b/src/stories/charts/sentiment/index.tsx similarity index 100% rename from src/stories/charts/line/index.tsx rename to src/stories/charts/sentiment/index.tsx From 9918a760174957038b4dc501437ecd8438279dab Mon Sep 17 00:00:00 2001 From: Marco Bonomo Date: Fri, 1 Sep 2023 12:41:33 +0200 Subject: [PATCH 15/22] =?UTF-8?q?=E2=9C=A8=20feat(index.tsx):=20add=20sent?= =?UTF-8?q?iment=20chart=20export?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.tsx b/src/index.tsx index ab3a0bc2..5cdcdbd7 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -44,6 +44,7 @@ export * from "./stories/charts/pie"; export * from "./stories/charts/halfPie"; export * from "./stories/charts/sunburst"; export * from "./stories/charts/waffle"; +export * from "./stories/charts/sentiment"; // --- Close --- export * from "./stories/close"; From 6fab9a32d7acd12a64ba3538d7e2e92aafc35a2d Mon Sep 17 00:00:00 2001 From: Marco Bonomo Date: Fri, 1 Sep 2023 12:42:04 +0200 Subject: [PATCH 16/22] =?UTF-8?q?=F0=9F=94=A5=20refactor(sentiment/index.t?= =?UTF-8?q?sx):=20remove=20unused=20import=20CHARTS=5FCOLOR=5FSCHEME=5FCAT?= =?UTF-8?q?EGORICAL?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/charts/sentiment/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/stories/charts/sentiment/index.tsx b/src/stories/charts/sentiment/index.tsx index c9db2da6..3523b3d6 100644 --- a/src/stories/charts/sentiment/index.tsx +++ b/src/stories/charts/sentiment/index.tsx @@ -1,7 +1,6 @@ import { ResponsiveLine, SliceTooltipProps } from "@nivo/line"; import { SentimentChartProps } from "./_types"; import { - CHARTS_COLOR_SCHEME_CATEGORICAL, DEFAULT_CHARTS_THEME, } from "../../theme/charts"; import { ChartContainer } from "../ChartContainer"; From 145cff4c48156cbaa99ffae3292888dd50a6aefe Mon Sep 17 00:00:00 2001 From: Marco Bonomo Date: Fri, 1 Sep 2023 12:59:14 +0200 Subject: [PATCH 17/22] =?UTF-8?q?=F0=9F=94=80=20refactor(sentiment/=5Ftype?= =?UTF-8?q?s.ts):=20remove=20unused=20props=20and=20update=20prop=20types?= =?UTF-8?q?=20in=20SentimentChartProps?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/charts/sentiment/_types.ts | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/stories/charts/sentiment/_types.ts b/src/stories/charts/sentiment/_types.ts index c0491ca9..af1df6d1 100644 --- a/src/stories/charts/sentiment/_types.ts +++ b/src/stories/charts/sentiment/_types.ts @@ -12,18 +12,13 @@ type SentimentData = { export interface SentimentChartProps { data: SentimentData; - width?: string; - height?: string; - padding?: number; - colors?: string[]; + width: string; + height: string; margin?: { top?: number; right?: number; bottom?: number; left?: number; }; - axisLeftLabel?: string; - axisBottomLabel?: string; tooltip?: ChartTooltipFunction; - legend?: LegendType | true; } From 69b2fa6f6438c7ac035491f271bf6e69c73333fd Mon Sep 17 00:00:00 2001 From: Marco Bonomo Date: Fri, 1 Sep 2023 12:59:23 +0200 Subject: [PATCH 18/22] =?UTF-8?q?=F0=9F=90=9B=20fix(index.stories.tsx):=20?= =?UTF-8?q?remove=20duplicate=20code=20and=20pass=20width,=20height,=20and?= =?UTF-8?q?=20margin=20props=20to=20SentimentChart=20component=20=E2=9C=A8?= =?UTF-8?q?=20feat(index.stories.tsx):=20add=20support=20for=20custom=20to?= =?UTF-8?q?oltip=20in=20SentimentChart=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/charts/sentiment/index.stories.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/stories/charts/sentiment/index.stories.tsx b/src/stories/charts/sentiment/index.stories.tsx index 97c7def6..df147c9f 100644 --- a/src/stories/charts/sentiment/index.stories.tsx +++ b/src/stories/charts/sentiment/index.stories.tsx @@ -80,12 +80,7 @@ const Template: StoryFn = (args) => ( Vertical Label - + @@ -104,11 +99,17 @@ const Template: StoryFn = (args) => ( export const Default = Template.bind({}); Default.args = { data: data, + width: `${data.data.length * 150}px`, + height: "350px", + margin: { top: 50, right: 0, bottom: 50, left: 0 }, }; export const WithCustomTooltip = Template.bind({}); WithCustomTooltip.args = { data: data, + width: `${data.data.length * 150}px`, + height: "350px", + margin: { top: 50, right: 0, bottom: 50, left: 0 }, tooltip: (node) => { const { data, label: cluster } = node; const sentimentValue = parseInt(data?.yValue as string); From 7edd9c67384a229a772371e71de99fc822c7bbd6 Mon Sep 17 00:00:00 2001 From: Marco Bonomo Date: Fri, 1 Sep 2023 13:16:19 +0200 Subject: [PATCH 19/22] =?UTF-8?q?=F0=9F=94=80=20refactor(=5Ftypes.ts):=20u?= =?UTF-8?q?pdate=20ChartTooltipFunction=20type=20to=20accept=20ReactNode?= =?UTF-8?q?=20in=20data=20field?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/charts/_types.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/stories/charts/_types.ts b/src/stories/charts/_types.ts index 4b9d9c27..5c0eae02 100644 --- a/src/stories/charts/_types.ts +++ b/src/stories/charts/_types.ts @@ -1,4 +1,4 @@ -import React from "react"; +import React, { ReactNode } from "react"; export type ChartTooltipFunction = ({ value, @@ -7,5 +7,5 @@ export type ChartTooltipFunction = ({ }: { value: string | number; label: string | number; - data?: Record; + data?: Record; }) => React.ReactNode; From 9cb64de25e7aecfb4740b99dd2d849f9031fa45a Mon Sep 17 00:00:00 2001 From: Marco Bonomo Date: Fri, 1 Sep 2023 13:16:32 +0200 Subject: [PATCH 20/22] =?UTF-8?q?=F0=9F=94=80=20refactor(=5Ftypes.ts):=20r?= =?UTF-8?q?emove=20unused=20import=20of=20LegendType=20=E2=9C=A8=20feat(?= =?UTF-8?q?=5Ftypes.ts):=20add=20i18n=20property=20to=20SentimentChartProp?= =?UTF-8?q?s=20interface?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/charts/sentiment/_types.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/stories/charts/sentiment/_types.ts b/src/stories/charts/sentiment/_types.ts index af1df6d1..e1069e53 100644 --- a/src/stories/charts/sentiment/_types.ts +++ b/src/stories/charts/sentiment/_types.ts @@ -1,5 +1,4 @@ import { ChartTooltipFunction } from "../_types"; -import { LegendType } from "../Legend"; type SentimentData = { id: string; @@ -21,4 +20,13 @@ export interface SentimentChartProps { left?: number; }; tooltip?: ChartTooltipFunction; + i18n?: { + sentimentsValues: { + veryPositive: string; + positive: string; + neutral: string; + negative: string; + veryNegative: string; + }; + }; } From c5f879bf89ed2e79697180a79cc91c13d4f3529f Mon Sep 17 00:00:00 2001 From: Marco Bonomo Date: Fri, 1 Sep 2023 13:16:43 +0200 Subject: [PATCH 21/22] =?UTF-8?q?=F0=9F=90=9B=20fix(sentiment/index.tsx):?= =?UTF-8?q?=20add=20i18n=20prop=20to=20formatSentiment=20function=20?= =?UTF-8?q?=E2=9C=A8=20feat(sentiment/index.tsx):=20add=20i18n=20prop=20to?= =?UTF-8?q?=20formatPoint=20function=20=E2=9C=A8=20feat(sentiment/index.ts?= =?UTF-8?q?x):=20add=20i18n=20prop=20to=20tooltip=20function?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/charts/sentiment/index.tsx | 36 +++++++++++++++----------- 1 file changed, 21 insertions(+), 15 deletions(-) diff --git a/src/stories/charts/sentiment/index.tsx b/src/stories/charts/sentiment/index.tsx index 3523b3d6..853d8f04 100644 --- a/src/stories/charts/sentiment/index.tsx +++ b/src/stories/charts/sentiment/index.tsx @@ -52,18 +52,18 @@ const SentimentContainer = styled(ChartContainer)` const DEFAULT_CHART_MARGINS = { top: 0, right: 0, bottom: 30, left: 30 }; -const formatSentiment = (value: DatumValue) => { +const formatSentiment = (value: DatumValue, i18n: SentimentChartProps["i18n"]) => { switch (value as number) { case 1: - return "Molto Negativo"; + return i18n?.sentimentsValues.veryNegative ?? "Very Negative"; case 2: - return "Negativo"; + return i18n?.sentimentsValues.negative ?? "Negative"; case 3: - return "Neutrale"; + return i18n?.sentimentsValues.neutral ?? "Neutral"; case 4: - return "Positivo"; + return i18n?.sentimentsValues.positive ?? "Positive"; case 5: - return "Molto Positivo"; + return i18n?.sentimentsValues.veryPositive ?? "Very Positive"; default: return ""; } @@ -72,17 +72,17 @@ const formatSentiment = (value: DatumValue) => { const formatPoint = (value: DatumValue) => { switch (value as number) { case 1: - return ; + return ; case 2: - return ; + return ; case 3: - return ; + return ; case 4: - return ; + return ; case 5: - return ; + return ; default: - return ""; + return <>; } }; @@ -105,6 +105,7 @@ export const SentimentChart = ({ height, margin, tooltip, + i18n, }: SentimentChartProps) => { const theme = useContext(ThemeContext as React.Context); @@ -171,17 +172,20 @@ export const SentimentChart = ({ pointSymbol={({ datum }) => { return {formatPoint(datum.y ?? "")}; }} + // To use the tooltip, we need to set "useMesh" to true and "enableSlices" to "false" tooltip={tooltip ? (node) => { const point = node.point.data; return ( <> {tooltip({ - value: formatSentiment(point.y), + value: formatSentiment(point.y, i18n), label: point.x.toString(), data: { customData: data.data[node.point.index].custom_data ?? undefined, yValue: point.y.toString() ?? "", + icon: formatPoint(point.y), + sentimentText: formatSentiment(point.y, i18n), } })} @@ -195,11 +199,13 @@ export const SentimentChart = ({ return ( <> {tooltip({ - value: formatSentiment(point.y), + value: formatSentiment(point.y, i18n), label: point.xFormatted, data: { customData: point.custom_data ?? undefined, yValue: point.yFormatted, + icon: formatPoint(point.y), + sentimentText: formatSentiment(point.y, i18n), } })} @@ -208,7 +214,7 @@ export const SentimentChart = ({ markers={[ { axis: 'y', - legend: 'Neutral', + legend: i18n?.sentimentsValues.neutral ?? "Neutral", legendPosition: 'bottom-left', lineStyle: { stroke: theme.palette.blue[600], From 39a8e464656977f48d6e440b5c717d3934d912e8 Mon Sep 17 00:00:00 2001 From: Marco Bonomo Date: Fri, 1 Sep 2023 13:16:56 +0200 Subject: [PATCH 22/22] =?UTF-8?q?=F0=9F=94=A8=20refactor(index.stories.tsx?= =?UTF-8?q?):=20remove=20unused=20imports=20and=20formatPoint=20function?= =?UTF-8?q?=20=E2=9C=A8=20feat(index.stories.tsx):=20extract=20common=20ar?= =?UTF-8?q?guments=20into=20a=20constant=20and=20use=20it=20in=20Default?= =?UTF-8?q?=20and=20WithCustomTooltip=20stories?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../charts/sentiment/index.stories.tsx | 50 +++++++------------ 1 file changed, 17 insertions(+), 33 deletions(-) diff --git a/src/stories/charts/sentiment/index.stories.tsx b/src/stories/charts/sentiment/index.stories.tsx index df147c9f..43233e27 100644 --- a/src/stories/charts/sentiment/index.stories.tsx +++ b/src/stories/charts/sentiment/index.stories.tsx @@ -5,12 +5,6 @@ import { data } from "./_data"; import { theme } from "../../theme"; import styled from "styled-components"; import { ContainerCard } from "../../cards"; -import { DatumValue } from "@nivo/core"; -import { ReactComponent as S1 } from "./assets/sentiment_1.svg"; -import { ReactComponent as S2 } from "./assets/sentiment_2.svg"; -import { ReactComponent as S3 } from "./assets/sentiment_3.svg"; -import { ReactComponent as S4 } from "./assets/sentiment_4.svg"; -import { ReactComponent as S5 } from "./assets/sentiment_5.svg"; import { LG, MD } from "../../typography/typescale"; import { Grid } from "../../grid/grid"; import { Row } from "../../grid/row"; @@ -43,21 +37,20 @@ const Tooltip = styled.div` white-space: normal; `; -const formatPoint = (value: DatumValue) => { - switch (value as number) { - case 1: - return ; - case 2: - return ; - case 3: - return ; - case 4: - return ; - case 5: - return ; - default: - return ""; - } +const commonArgs = { + data: data, + width: `${data.data.length * 150}px`, + height: "350px", + margin: { top: 50, right: 0, bottom: 50, left: 0 }, + i18n: { + sentimentsValues: { + veryNegative: "Molto Negativo", + negative: "Negativo", + neutral: "Neutrale", + positive: "Positivo", + veryPositive: "Molto Positivo", + }, + }, }; const Template: StoryFn = (args) => ( @@ -97,27 +90,18 @@ const Template: StoryFn = (args) => ( ); export const Default = Template.bind({}); -Default.args = { - data: data, - width: `${data.data.length * 150}px`, - height: "350px", - margin: { top: 50, right: 0, bottom: 50, left: 0 }, -}; +Default.args = commonArgs; export const WithCustomTooltip = Template.bind({}); WithCustomTooltip.args = { - data: data, - width: `${data.data.length * 150}px`, - height: "350px", - margin: { top: 50, right: 0, bottom: 50, left: 0 }, + ...commonArgs, tooltip: (node) => { const { data, label: cluster } = node; - const sentimentValue = parseInt(data?.yValue as string); return (
- {formatPoint(sentimentValue)}{cluster} + {data?.icon}{cluster}
{data?.customData && (