From d77d755b7700ed0d31237f4a3f82781e6650b236 Mon Sep 17 00:00:00 2001 From: Alexandre Balon-Perin Date: Sat, 8 Jun 2024 19:06:29 +0900 Subject: [PATCH 1/2] Make fork publishable to npm registry --- README.md | 2 ++ package.json | 8 ++++---- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index af7e3f2a..d5030fd5 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@

+

WARNING: This is a fork of the Tremor library that can be found at: https://github.com/tremorlabs/tremor

+

This fork is intended to be used at Panalyt until the pending PRs that resolves some of the necessary items for Panalyt are merged

diff --git a/package.json b/package.json index 9ab7eec2..8f477a16 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "@tremor/react", + "name": "@abalonperin/tremor", "version": "0.0.0-development", - "description": "The React library to build dashboards faster.", + "description": "A fork of the Tremor library", "scripts": { "prebuild": "rm -rf dist", "build": "rollup -c", @@ -15,10 +15,10 @@ }, "repository": { "type": "git", - "url": "https://github.com/tremorlabs/tremor.git" + "url": "git+https://github.com/tremorlabs/tremor.git" }, "author": "tremor", - "license": "Apache 2.0", + "license": "Apache-2.0", "bugs": { "url": "https://github.com/tremorlabs/tremor/issues" }, From a641abbc2e68d9171b7d3a0516cb84125798ba96 Mon Sep 17 00:00:00 2001 From: Alexandre Balon-Perin Date: Sat, 8 Jun 2024 19:28:21 +0900 Subject: [PATCH 2/2] Feat/allow toggling axisline (#2) * allow toggling axisline for all chart types * fix styling + add tests --- .../chart-elements/AreaChart/AreaChart.tsx | 17 ++++++++-- .../chart-elements/BarChart/BarChart.tsx | 33 ++++++++++++++++--- .../chart-elements/LineChart/LineChart.tsx | 17 ++++++++-- .../ScatterChart/ScatterChart.tsx | 18 ++++++++-- .../chart-elements/common/BaseChartProps.tsx | 1 + .../chart-elements/AreaChart.stories.tsx | 6 ++++ .../chart-elements/BarChart.stories.tsx | 6 ++++ .../chart-elements/LineChart.stories.tsx | 6 ++++ .../chart-elements/ScatterChart.stories.tsx | 6 ++++ 9 files changed, 100 insertions(+), 10 deletions(-) diff --git a/src/components/chart-elements/AreaChart/AreaChart.tsx b/src/components/chart-elements/AreaChart/AreaChart.tsx index 57426b02..2bf62894 100644 --- a/src/components/chart-elements/AreaChart/AreaChart.tsx +++ b/src/components/chart-elements/AreaChart/AreaChart.tsx @@ -65,6 +65,7 @@ const AreaChart = React.forwardRef((props, ref) showTooltip = true, showLegend = true, showGridLines = true, + showAxisLine = false, showGradient = true, autoMinValue = false, curveType = "linear", @@ -188,10 +189,16 @@ const AreaChart = React.forwardRef((props, ref) "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} interval={startEndOnly ? "preserveStartEnd" : intervalType} tickLine={false} - axisLine={false} + axisLine={showAxisLine} minTickGap={tickGap} angle={rotateLabelX?.angle} dy={rotateLabelX?.verticalShift} @@ -210,7 +217,7 @@ const AreaChart = React.forwardRef((props, ref) ((props, ref) "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} tickFormatter={valueFormatter} allowDecimals={allowDecimals} diff --git a/src/components/chart-elements/BarChart/BarChart.tsx b/src/components/chart-elements/BarChart/BarChart.tsx index c87df34b..997346bd 100644 --- a/src/components/chart-elements/BarChart/BarChart.tsx +++ b/src/components/chart-elements/BarChart/BarChart.tsx @@ -84,6 +84,7 @@ const BarChart = React.forwardRef((props, ref) => showTooltip = true, showLegend = true, showGridLines = true, + showAxisLine = false, autoMinValue = false, minValue, maxValue, @@ -202,9 +203,15 @@ const BarChart = React.forwardRef((props, ref) => "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} tickLine={false} - axisLine={false} + axisLine={showAxisLine} angle={rotateLabelX?.angle} dy={rotateLabelX?.verticalShift} height={rotateLabelX?.xAxisHeight} @@ -235,9 +242,15 @@ const BarChart = React.forwardRef((props, ref) => "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} tickLine={false} - axisLine={false} + axisLine={showAxisLine} tickFormatter={valueFormatter} minTickGap={tickGap} allowDecimals={allowDecimals} @@ -260,7 +273,7 @@ const BarChart = React.forwardRef((props, ref) => ((props, ref) => "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} tickFormatter={ relative ? (value: number) => `${(value * 100).toString()} %` : valueFormatter @@ -297,7 +316,7 @@ const BarChart = React.forwardRef((props, ref) => width={yAxisWidth} hide={!showYAxis} dataKey={index} - axisLine={false} + axisLine={showAxisLine} tickLine={false} ticks={startEndOnly ? [data[0][index], data[data.length - 1][index]] : undefined} type="category" @@ -312,6 +331,12 @@ const BarChart = React.forwardRef((props, ref) => "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} > {yAxisLabel && ( diff --git a/src/components/chart-elements/LineChart/LineChart.tsx b/src/components/chart-elements/LineChart/LineChart.tsx index ded14f8d..4513f6af 100644 --- a/src/components/chart-elements/LineChart/LineChart.tsx +++ b/src/components/chart-elements/LineChart/LineChart.tsx @@ -61,6 +61,7 @@ const LineChart = React.forwardRef((props, ref) showTooltip = true, showLegend = true, showGridLines = true, + showAxisLine = false, autoMinValue = false, curveType = "linear", minValue, @@ -185,9 +186,15 @@ const LineChart = React.forwardRef((props, ref) "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} tickLine={false} - axisLine={false} + axisLine={showAxisLine} minTickGap={tickGap} angle={rotateLabelX?.angle} dy={rotateLabelX?.verticalShift} @@ -206,7 +213,7 @@ const LineChart = React.forwardRef((props, ref) ((props, ref) "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} tickFormatter={valueFormatter} allowDecimals={allowDecimals} diff --git a/src/components/chart-elements/ScatterChart/ScatterChart.tsx b/src/components/chart-elements/ScatterChart/ScatterChart.tsx index 99b17afe..5388e4e0 100644 --- a/src/components/chart-elements/ScatterChart/ScatterChart.tsx +++ b/src/components/chart-elements/ScatterChart/ScatterChart.tsx @@ -64,6 +64,7 @@ export interface ScatterChartProps showTooltip?: boolean; showLegend?: boolean; showGridLines?: boolean; + showAxisLine?: boolean; autoMinXValue?: boolean; minXValue?: number; maxXValue?: number; @@ -129,6 +130,7 @@ const ScatterChart = React.forwardRef((props, showTooltip = true, showLegend = true, showGridLines = true, + showAxisLine = false, autoMinXValue = false, minXValue, maxXValue, @@ -246,10 +248,16 @@ const ScatterChart = React.forwardRef((props, "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} tickLine={false} tickFormatter={valueFormatter.x} - axisLine={false} + axisLine={showAxisLine} minTickGap={tickGap} domain={xAxisDomain as AxisDomain} allowDataOverflow={true} @@ -272,7 +280,7 @@ const ScatterChart = React.forwardRef((props, ((props, "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} allowDecimals={allowDecimals} allowDataOverflow={true} diff --git a/src/components/chart-elements/common/BaseChartProps.tsx b/src/components/chart-elements/common/BaseChartProps.tsx index a08969f5..abc2da0e 100644 --- a/src/components/chart-elements/common/BaseChartProps.tsx +++ b/src/components/chart-elements/common/BaseChartProps.tsx @@ -27,6 +27,7 @@ interface BaseChartProps extends BaseAnimationTimingProps, React.HTMLAttributes< showTooltip?: boolean; showLegend?: boolean; showGridLines?: boolean; + showAxisLine?: boolean; autoMinValue?: boolean; minValue?: number; maxValue?: number; diff --git a/src/stories/chart-elements/AreaChart.stories.tsx b/src/stories/chart-elements/AreaChart.stories.tsx index db57ce06..9a7f0957 100644 --- a/src/stories/chart-elements/AreaChart.stories.tsx +++ b/src/stories/chart-elements/AreaChart.stories.tsx @@ -364,3 +364,9 @@ export const AxisLabels: Story = { yAxisLabel: "Amount (USD)", }, }; + +export const ShowAxisLine: Story = { + args: { + showAxisLine: true, + }, +}; diff --git a/src/stories/chart-elements/BarChart.stories.tsx b/src/stories/chart-elements/BarChart.stories.tsx index 664925dc..1f559c43 100644 --- a/src/stories/chart-elements/BarChart.stories.tsx +++ b/src/stories/chart-elements/BarChart.stories.tsx @@ -387,3 +387,9 @@ export const AxisLabels: Story = { yAxisLabel: "Amount (USD)", }, }; + +export const ShowAxisLine: Story = { + args: { + showAxisLine: true, + }, +}; diff --git a/src/stories/chart-elements/LineChart.stories.tsx b/src/stories/chart-elements/LineChart.stories.tsx index 11cea258..111b933b 100644 --- a/src/stories/chart-elements/LineChart.stories.tsx +++ b/src/stories/chart-elements/LineChart.stories.tsx @@ -324,3 +324,9 @@ export const AxisLabels: Story = { yAxisLabel: "Amount (USD)", }, }; + +export const ShowAxisLine: Story = { + args: { + showAxisLine: true, + }, +}; diff --git a/src/stories/chart-elements/ScatterChart.stories.tsx b/src/stories/chart-elements/ScatterChart.stories.tsx index d12402b0..b14fbc54 100644 --- a/src/stories/chart-elements/ScatterChart.stories.tsx +++ b/src/stories/chart-elements/ScatterChart.stories.tsx @@ -197,3 +197,9 @@ export const AxisLabels: Story = { yAxisLabel: "Amount (USD)", }, }; + +export const ShowAxisLine: Story = { + args: { + showAxisLine: true, + }, +};