Skip to content

Commit

Permalink
feat: add tooltip controls
Browse files Browse the repository at this point in the history
  • Loading branch information
@ramenhog
ramenhog committed Nov 19, 2024
1 parent d78136a commit b412817
Show file tree
Hide file tree
Showing 2 changed files with 123 additions and 15 deletions.
46 changes: 41 additions & 5 deletions demo/ts/components/theme-builder/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@ import { VictoryAxis } from "victory-axis";
import { VictoryStack } from "victory-stack";
import { VictoryBar } from "victory-bar";
import { VictoryArea } from "victory-area";
import { VictoryTooltip } from "victory-tooltip";
import Select from "./select";
import ConfigPreview from "./config-preview";
import Button from "./button";
import ConfigMapper from "./config-mapper";
import { setNestedConfigValue } from "./utils";
import optionsConfig from "./options-config";
import theme from "demo/ts/theme/victory-axis-differential-styling-theme";

export type ThemeOption = {
name: string;
Expand Down Expand Up @@ -83,6 +83,7 @@ const ThemeBuilder = () => {
React.useState<ColorScalePropType>("qualitative");
const [showThemeConfigPreview, setShowThemeConfigPreview] =
React.useState(false);
const [showTooltips, setShowTooltips] = React.useState(true);

const handleThemeSelect = (themeName: string) => {
const theme = themes.find((t) => t.name === themeName);
Expand Down Expand Up @@ -158,6 +159,20 @@ const ThemeBuilder = () => {
{customThemeConfig && (
<div className="max-w-screen-xl w-full py-4 px-10">
<h2 className="text-xl font-bold mb-4">Example Charts</h2>
<fieldset>
<div className="flex items-center gap-4 mb-4">
<input
type="checkbox"
id="show-tooltips"
className="form-checkbox h-5 w-5 text-primary"
checked={showTooltips}
onChange={() => setShowTooltips(!showTooltips)}
/>
<label htmlFor="show-tooltips">
Show tooltips instead of labels
</label>
</div>
</fieldset>
<div className="grid grid-cols-2 gap-10">
<div>
<h3 className="text-base font-bold mb-3">Stacked Area Chart</h3>
Expand All @@ -173,7 +188,11 @@ const ThemeBuilder = () => {
aria-label="Victory Stack Demo"
>
{[...Array(5)].map((_, i) => (
<VictoryArea data={sampleStackData} key={i} />
<VictoryArea
data={sampleStackData}
key={i}
labels={() => undefined}
/>
))}
</VictoryStack>
</VictoryChart>
Expand All @@ -192,7 +211,16 @@ const ThemeBuilder = () => {
aria-label="Victory Stack Demo"
>
{[...Array(5)].map((_, i) => (
<VictoryBar data={sampleStackData} key={i} />
<VictoryBar
data={sampleStackData}
key={i}
labels={({ datum }) =>
showTooltips ? datum.y : undefined
}
{...(showTooltips && {
labelComponent: <VictoryTooltip />,
})}
/>
))}
</VictoryStack>
</VictoryChart>
Expand All @@ -208,13 +236,21 @@ const ThemeBuilder = () => {
domainPadding={20}
style={chartStyle}
>
{Content({ labels: ({ datum }) => datum.y })}
{Content({
labels: ({ datum }) => datum.y || datum.x,
...(showTooltips && {
labelComponent: <VictoryTooltip />,
}),
})}
</VictoryChart>
) : (
Content({
labels: ({ datum }) => datum.y,
labels: ({ datum }) => datum.y || datum.x,
style: chartStyle,
theme: customThemeConfig,
...(showTooltips && {
labelComponent: <VictoryTooltip />,
}),
})
)}
</div>
Expand Down
92 changes: 82 additions & 10 deletions demo/ts/components/theme-builder/options-config.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,11 +93,11 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
{...props}
key="area-chart"
data={[
{ x: 1, y: 2 },
{ x: 2, y: 3 },
{ x: 3, y: 5 },
{ x: 4, y: 4 },
{ x: 5, y: 7 },
{ x: 1, y: 2, label: "A" },
{ x: 2, y: 3, label: "B" },
{ x: 3, y: 5, label: "C" },
{ x: 4, y: 4, label: "D" },
{ x: 5, y: 7, label: "E" },
]}
/>,
],
Expand Down Expand Up @@ -149,11 +149,11 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
key="bar-chart"
{...props}
data={[
{ x: 1, y: 2 },
{ x: 2, y: 3 },
{ x: 3, y: 5 },
{ x: 4, y: 4 },
{ x: 5, y: 7 },
{ x: 1, y: 2, label: "A" },
{ x: 2, y: 3, label: "B" },
{ x: 3, y: 5, label: "C" },
{ x: 4, y: 4, label: "D" },
{ x: 5, y: 7, label: "E" },
]}
/>,
],
Expand Down Expand Up @@ -216,34 +216,39 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
close: 10,
high: 15,
low: 0,
label: "A",
},
{
x: "3/2/23",
open: 10,
close: 15,
high: 20,
low: 5,
label: "B",
},
{
x: "3/3/23",
open: 15,
close: 20,
high: 22,
low: 10,
label: "C",
},
{
x: "3/4/23",
open: 20,
close: 10,
high: 25,
low: 7,
label: "D",
},
{
x: "3/5/23",
open: 10,
close: 8,
high: 15,
low: 5,
label: "E",
},
]}
/>
Expand Down Expand Up @@ -771,6 +776,73 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
},
],
},
// tooltip
{
type: "section",
title: "Tooltip",
fields: [
{
type: "section",
label: "General",
fields: [
...getBaseLabelsConfig("tooltip.style"),
{
type: "slider",
label: "Corner Radius",
min: 0,
max: 10,
default: 0,
path: "tooltip.cornerRadius",
},
{
type: "slider",
label: "Pointer Length",
min: 0,
max: 20,
default: 10,
path: "tooltip.pointerLength",
},
],
},
{
type: "section",
label: "Flyout",
fields: [
{
type: "colorPicker",
label: "Fill",
default: "#FFFFFF",
path: "tooltip.flyoutStyle.fill",
},
{
type: "colorPicker",
label: "Stroke",
default: defaultFill,
path: "tooltip.flyoutStyle.stroke",
},
{
type: "slider",
label: "Stroke Width",
min: 0,
max: 5,
unit: "px",
default: 1,
path: "tooltip.flyoutStyle.strokeWidth",
},
{
type: "select",
label: "Pointer Events",
options: [
{ label: "None", value: "none" },
{ label: "All", value: "all" },
],
default: "none",
path: "tooltip.flyoutStyle.pointerEvents",
},
],
},
],
},
];

export default optionsConfig;

0 comments on commit b412817

Please sign in to comment.