Skip to content

Commit

Permalink
fix: chart stories (#43)
Browse files Browse the repository at this point in the history 
* fix stories
  • Loading branch information
@severinlandolt
severinlandolt authored Jun 20, 2024
1 parent 2799a49 commit cc98727
Show file tree
Hide file tree
Showing 6 changed files with 177 additions and 123 deletions.
75 changes: 36 additions & 39 deletions src/components/AreaChart/AreaChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -397,43 +397,26 @@ const ChartTooltipRow = ({ value, name, color }: ChartTooltipRowProps) => (
</div>
)

type TooltipCallbackProps = Pick<
ChartTooltipProps,
"active" | "payload" | "label"
>

interface ChartTooltipProps {
active: boolean | undefined
payload: any
label: string
categoryColors: Map<string, string>
valueFormatter: (value: number) => string
tooltipCallback?: TooltipCallback
}

type TooltipCallbackProps = Pick<
ChartTooltipProps,
"active" | "payload" | "label"
>

type TooltipCallback = (tooltipCallbackContent: TooltipCallbackProps) => void

const ChartTooltip = ({
active,
payload,
label,
categoryColors,
valueFormatter,
tooltipCallback,
}: ChartTooltipProps) => {
React.useEffect(() => {
if (tooltipCallback && payload) {
const filteredPayload = payload.map((item: any) => ({
category: item.dataKey,
value: item.value,
index: item.payload.date,
color: categoryColors.get(item.dataKey) as AvailableChartColorsKeys,
payload: item.payload,
}))
tooltipCallback({ active, payload: filteredPayload, label })
}
}, [label, active])

if (active && payload) {
const filteredPayload = payload.filter((item: any) => item.type !== "none")

Expand Down Expand Up @@ -531,7 +514,7 @@ interface AreaChartProps extends React.HTMLAttributes<HTMLDivElement> {
yAxisLabel?: string
type?: "default" | "stacked" | "percent"
legendPosition?: "left" | "center" | "right"
tooltipCallback?: TooltipCallback
tooltipCallback?: (tooltipCallbackContent: TooltipCallbackProps) => void
fill?: "gradient" | "solid" | "none"
}

Expand Down Expand Up @@ -771,22 +754,36 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(
cursor={{ stroke: "#d1d5db", strokeWidth: 1 }}
offset={20}
position={{ y: 0 }}
content={
showTooltip ? (
({ active, payload, label }) => (
<ChartTooltip
active={active}
payload={payload}
label={label}
valueFormatter={valueFormatter}
categoryColors={categoryColors}
tooltipCallback={tooltipCallback}
/>
)
) : (
<></>
)
}
content={({ active, payload, label }) => {
React.useEffect(() => {
if (tooltipCallback && payload) {
const filteredPayload = payload.map((item: any) => ({
category: item.dataKey,
value: item.value,
index: item.payload.date,
color: categoryColors.get(
item.dataKey,
) as AvailableChartColorsKeys,
payload: item.payload,
}))
tooltipCallback({
active,
payload: filteredPayload,
label,
})
}
}, [label, active])

return showTooltip && active ? (
<ChartTooltip
active={active}
payload={payload}
label={label}
valueFormatter={valueFormatter}
categoryColors={categoryColors}
/>
) : null
}}
/>
{showLegend ? (
<RechartsLegend
Expand Down
25 changes: 23 additions & 2 deletions src/components/AreaChart/areachart.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import React from "react"
import type { Meta, StoryObj } from "@storybook/react"

import { Label } from "../Label/Label"
import { Switch } from "../Switch/Switch"
import { AreaChart } from "./AreaChart"

const chartdata = [
Expand Down Expand Up @@ -295,8 +298,26 @@ export const WithOnValueChange: Story = {
}

export const WithTooltipCallback: Story = {
args: {
tooltipCallback: (props) => console.log(JSON.stringify(props.payload)),
render: () => {
const [callback, setCallBack] = React.useState(null)
const [checked, setChecked] = React.useState(true)
return (
<>
<div className="flex items-center gap-3">
<Label htmlFor="a">showTooltip</Label>
<Switch id="a" checked={checked} onCheckedChange={setChecked} />
</div>

<AreaChart
data={chartdata}
index="date"
categories={["SolarCells", "Glass"]}
tooltipCallback={(props) => setCallBack(props.payload)}
showTooltip={checked}
/>
<pre>{JSON.stringify(callback, null, 2)}</pre>
</>
)
},
}

Expand Down
75 changes: 36 additions & 39 deletions src/components/BarChart/BarChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -454,43 +454,26 @@ const ChartTooltipRow = ({ value, name, color }: ChartTooltipRowProps) => (
</div>
)

type TooltipCallbackProps = Pick<
ChartTooltipProps,
"active" | "payload" | "label"
>

interface ChartTooltipProps {
active: boolean | undefined
payload: any
label: string
categoryColors: Map<string, string>
valueFormatter: (value: number) => string
tooltipCallback?: TooltipCallback
}

type TooltipCallbackProps = Pick<
ChartTooltipProps,
"active" | "payload" | "label"
>

type TooltipCallback = (tooltipCallbackContent: TooltipCallbackProps) => void

const ChartTooltip = ({
active,
payload,
label,
categoryColors,
valueFormatter,
tooltipCallback,
}: ChartTooltipProps) => {
React.useEffect(() => {
if (tooltipCallback && payload) {
const filteredPayload = payload.map((item: any) => ({
category: item.dataKey,
value: item.value,
index: item.payload.date,
color: categoryColors.get(item.dataKey) as AvailableChartColorsKeys,
payload: item.payload,
}))
tooltipCallback({ active, payload: filteredPayload, label })
}
}, [label, active])

if (active && payload) {
const filteredPayload = payload.filter((item: any) => item.type !== "none")

Expand Down Expand Up @@ -584,7 +567,7 @@ interface BarChartProps extends React.HTMLAttributes<HTMLDivElement> {
layout?: "vertical" | "horizontal"
type?: "default" | "stacked" | "percent"
legendPosition?: "left" | "center" | "right"
tooltipCallback?: TooltipCallback
tooltipCallback?: (tooltipCallbackContent: TooltipCallbackProps) => void
}

const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(
Expand Down Expand Up @@ -811,22 +794,36 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(
y: layout === "horizontal" ? 0 : undefined,
x: layout === "horizontal" ? undefined : yAxisWidth + 20,
}}
content={
showTooltip ? (
({ active, payload, label }) => (
<ChartTooltip
active={active}
payload={payload}
label={label}
valueFormatter={valueFormatter}
categoryColors={categoryColors}
tooltipCallback={tooltipCallback}
/>
)
) : (
<></>
)
}
content={({ active, payload, label }) => {
React.useEffect(() => {
if (tooltipCallback && payload) {
const filteredPayload = payload.map((item: any) => ({
category: item.dataKey,
value: item.value,
index: item.payload.date,
color: categoryColors.get(
item.dataKey,
) as AvailableChartColorsKeys,
payload: item.payload,
}))
tooltipCallback({
active,
payload: filteredPayload,
label,
})
}
}, [label, active])

return showTooltip && active ? (
<ChartTooltip
active={active}
payload={payload}
label={label}
valueFormatter={valueFormatter}
categoryColors={categoryColors}
/>
) : null
}}
/>
{showLegend ? (
<RechartsLegend
Expand Down
25 changes: 23 additions & 2 deletions src/components/BarChart/barchart.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import React from "react"
import type { Meta, StoryObj } from "@storybook/react"

import { Label } from "../Label/Label"
import { Switch } from "../Switch/Switch"
import { BarChart } from "./BarChart"

const chartdata = [
Expand Down Expand Up @@ -268,8 +271,26 @@ export const WithOnValueChange: Story = {
}

export const WithTooltipCallback: Story = {
args: {
tooltipCallback: (props) => console.log(JSON.stringify(props.payload)),
render: () => {
const [callback, setCallBack] = React.useState(null)
const [checked, setChecked] = React.useState(true)
return (
<>
<div className="flex items-center gap-3">
<Label htmlFor="a">showTooltip</Label>
<Switch id="a" checked={checked} onCheckedChange={setChecked} />
</div>

<BarChart
data={chartdata}
index="date"
categories={["SolarCells", "Glass"]}
tooltipCallback={(props) => setCallBack(props.payload)}
showTooltip={checked}
/>
<pre>{JSON.stringify(callback, null, 2)}</pre>
</>
)
},
}

Expand Down
Loading

0 comments on commit cc98727

Please sign in to comment.