diff --git a/README.md b/README.md index af7e3f2ae..d5030fd50 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 9ab7eec2a..8f477a163 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" }, diff --git a/src/components/chart-elements/AreaChart/AreaChart.tsx b/src/components/chart-elements/AreaChart/AreaChart.tsx index 10d73ec91..fe71ddd88 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", @@ -189,10 +190,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} @@ -211,7 +218,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 5fca7cc25..8b3a05ea8 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, @@ -203,9 +204,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} @@ -236,9 +243,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} @@ -261,7 +274,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 @@ -298,7 +317,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" @@ -313,6 +332,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 b030aa4d4..c8e5ef659 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, @@ -186,9 +187,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} @@ -207,7 +214,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 99b17afe3..5388e4e03 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 1668c0381..42c85974d 100644 --- a/src/components/chart-elements/common/BaseChartProps.tsx +++ b/src/components/chart-elements/common/BaseChartProps.tsx @@ -28,6 +28,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 9b8d76913..9c791b400 100644 --- a/src/stories/chart-elements/AreaChart.stories.tsx +++ b/src/stories/chart-elements/AreaChart.stories.tsx @@ -389,4 +389,10 @@ export const DataLabelsFunction: Story = { args: { renderLabel: renderCustomizedLabel, }, +} + +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 0b3869916..85eaae6d9 100644 --- a/src/stories/chart-elements/BarChart.stories.tsx +++ b/src/stories/chart-elements/BarChart.stories.tsx @@ -412,4 +412,10 @@ export const DataLabelsFunction: Story = { args: { renderLabel: renderCustomizedLabel, }, +} + +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 0037ba7ae..811a0d4c7 100644 --- a/src/stories/chart-elements/LineChart.stories.tsx +++ b/src/stories/chart-elements/LineChart.stories.tsx @@ -349,4 +349,10 @@ export const DataLabelsFunction: Story = { args: { renderLabel: renderCustomizedLabel, }, +} + +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 d12402b00..b14fbc540 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, + }, +};