Merge branch 'panalyt' into feat/allow_passing_label_as_prop

tremorlabs · Jun 8, 2024 · dc1b05e · dc1b05e
2 parents 51127ed + a641abb
commit dc1b05e
Show file tree

Hide file tree

Showing 11 changed files with 106 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 <br />
 <br />
+<h2>WARNING: This is a fork of the Tremor library that can be found at: https://github.com/tremorlabs/tremor</h2>
+<p>This fork is intended to be used at Panalyt until the pending PRs that resolves some of the necessary items for Panalyt are merged</p>
 <p align="center">
   <a href="https://tremor.so">
     <picture>

diff --git 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
@@ -65,6 +65,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
     showTooltip = true,
     showLegend = true,
     showGridLines = true,
+    showAxisLine = false,
     showGradient = true,
     autoMinValue = false,
     curveType = "linear",
@@ -189,10 +190,16 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((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<HTMLDivElement, AreaChartProps>((props, ref)
             <YAxis
               width={yAxisWidth}
               hide={!showYAxis}
-              axisLine={false}
+              axisLine={showAxisLine}
               tickLine={false}
               type="number"
               domain={yAxisDomain as AxisDomain}
@@ -225,6 +232,12 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((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
@@ -84,6 +84,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
     showTooltip = true,
     showLegend = true,
     showGridLines = true,
+    showAxisLine = false,
     autoMinValue = false,
     minValue,
     maxValue,
@@ -203,9 +204,15 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((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<HTMLDivElement, BarChartProps>((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<HTMLDivElement, BarChartProps>((props, ref) =>
               <YAxis
                 width={yAxisWidth}
                 hide={!showYAxis}
-                axisLine={false}
+                axisLine={showAxisLine}
                 tickLine={false}
                 type="number"
                 domain={yAxisDomain as AxisDomain}
@@ -275,6 +288,12 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((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<HTMLDivElement, BarChartProps>((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<HTMLDivElement, BarChartProps>((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
@@ -61,6 +61,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
     showTooltip = true,
     showLegend = true,
     showGridLines = true,
+    showAxisLine = false,
     autoMinValue = false,
     curveType = "linear",
     minValue,
@@ -186,9 +187,15 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((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<HTMLDivElement, LineChartProps>((props, ref)
             <YAxis
               width={yAxisWidth}
               hide={!showYAxis}
-              axisLine={false}
+              axisLine={showAxisLine}
               tickLine={false}
               type="number"
               domain={yAxisDomain as AxisDomain}
@@ -221,6 +228,12 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((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
@@ -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<HTMLDivElement, ScatterChartProps>((props,
     showTooltip = true,
     showLegend = true,
     showGridLines = true,
+    showAxisLine = false,
     autoMinXValue = false,
     minXValue,
     maxXValue,
@@ -246,10 +248,16 @@ const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>((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<HTMLDivElement, ScatterChartProps>((props,
               <YAxis
                 width={yAxisWidth}
                 hide={!showYAxis}
-                axisLine={false}
+                axisLine={showAxisLine}
                 tickLine={false}
                 dataKey={y}
                 type="number"
@@ -289,6 +297,12 @@ const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>((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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -197,3 +197,9 @@ export const AxisLabels: Story = {
     yAxisLabel: "Amount (USD)",
   },
 };
+
+export const ShowAxisLine: Story = {
+  args: {
+    showAxisLine: true,
+  },
+};