label size

tremorlabs · Apr 13, 2024 · 122a239 · 122a239
1 parent 06467c1
commit 122a239
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 7 deletions.
diff --git a/src/components/chart-elements/FunnelChart/FunnelChart.tsx b/src/components/chart-elements/FunnelChart/FunnelChart.tsx
@@ -73,6 +73,9 @@ export interface FunnelChartProps extends React.HTMLAttributes<HTMLDivElement> {
   };
 }
 
+//#region Funnel Chart Primitive
+// ============================================================================
+
 const FunnelChartPrimitive = React.forwardRef<HTMLDivElement, FunnelChartProps>(
   (props: FunnelChartProps, ref) => {
     const {
@@ -355,12 +358,11 @@ const FunnelChartPrimitive = React.forwardRef<HTMLDivElement, FunnelChartProps>(
                         10
                       }
                       textAnchor="middle"
-                      fontSize="0.75rem"
                       fill=""
                       stroke=""
                       className={tremorTwMerge(
                         // light
-                        "fill-tremor-content",
+                        "fill-tremor-content text-tremor-label",
                         // dark
                         "dark:fill-dark-tremor-content",
                       )}
@@ -607,13 +609,13 @@ const validateData = (data: DataT[], calculatedFrom?: CalculateFrom): string | n
   return null;
 };
 
-// Exports
+//#region  Exports
 // ============================================================================
 
 const FunnelChart = ({ data, ...props }: FunnelChartProps) => {
   const errorMessage = data ? validateData(data, props.calculateFrom) : null;
   return errorMessage ? (
-    <NoData noDataText={`Calculation error: ${errorMessage}`} />
+    <NoData className="h-full w-full p-6" noDataText={`Calculation error: ${errorMessage}`} />
   ) : (
     <FunnelChartPrimitive data={data} {...props} />
   );

diff --git a/src/components/chart-elements/common/NoData.tsx b/src/components/chart-elements/common/NoData.tsx
@@ -3,8 +3,9 @@ import React from "react";
 
 interface NoDataProps {
   noDataText?: string;
+  className?: string;
 }
-const NoData = ({ noDataText = "No data" }: NoDataProps) => {
+const NoData = ({ className, noDataText = "No data" }: NoDataProps) => {
   return (
     <div
       className={tremorTwMerge(
@@ -14,6 +15,7 @@ const NoData = ({ noDataText = "No data" }: NoDataProps) => {
         "border-tremor-border",
         // dark
         "dark:border-dark-tremor-border",
+        className,
       )}
     >
       <p

diff --git a/src/stories/chart-elements/FunnelChart.stories.tsx b/src/stories/chart-elements/FunnelChart.stories.tsx
@@ -7,8 +7,8 @@ import { CustomTooltipProps } from "components/chart-elements/common/CustomToolt
 import { currencyValueFormatter } from "lib";
 
 const data = [
-  { name: "opens", value: -200 },
-  { name: "visitors", value: 351 },
+  { name: "opens", value: 200 },
+  { name: "visitors ajdf asfkdjhs dkfjhas dfjas jfkhasd kjk ", value: 351 },
   {
     name: `added to cart`,
     value: 191,