Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Beta tremor v4 #1146

Closed
wants to merge 47 commits into from
Closed
Changes from 1 commit
Commits
Show all changes
47 commits
Select commit Hold shift + click to select a range
8fcee4c
fix: bump headlessui
severinlandolt Dec 6, 2024
866d578
fix: dialog
severinlandolt Dec 6, 2024
dfc8978
test: uts for areaChart, barChart, sparkAreaChart, Legend (#1065)
Wajahat5 Dec 6, 2024
75cb04e
fix: datepicker position
severinlandolt Dec 6, 2024
7917815
fix: selects
severinlandolt Dec 6, 2024
9020480
chore: min width date picker
severinlandolt Dec 6, 2024
442f47d
update badge
severinlandolt Dec 6, 2024
318cd4b
add vite to storybook
severinlandolt Dec 7, 2024
19c068a
storybook
severinlandolt Dec 8, 2024
a17ea45
badge, card, remove other stuff
severinlandolt Dec 8, 2024
f25039c
multiselect
severinlandolt Dec 9, 2024
5061b5d
update components
severinlandolt Dec 9, 2024
a11c9ab
callout
severinlandolt Dec 9, 2024
468b091
update
severinlandolt Dec 10, 2024
4cd43fa
switch
severinlandolt Dec 11, 2024
cb2242f
tabs
severinlandolt Dec 11, 2024
c2e2034
lint
severinlandolt Dec 11, 2024
9e9c5ac
exports
severinlandolt Dec 11, 2024
2058acf
dialog
severinlandolt Dec 11, 2024
8f5be57
accordion
severinlandolt Dec 11, 2024
444f5c0
table and legend
severinlandolt Dec 11, 2024
6d80cd1
legend
severinlandolt Dec 11, 2024
eb9126b
progress circle
severinlandolt Dec 11, 2024
edd2287
progresssbar
severinlandolt Dec 11, 2024
706d202
barlist
severinlandolt Dec 11, 2024
a970232
barlist
severinlandolt Dec 11, 2024
c4cfa7e
spark charts
severinlandolt Dec 11, 2024
ca247e6
spark exports
severinlandolt Dec 11, 2024
ea883b9
spark area chart docs
severinlandolt Dec 11, 2024
7496bde
funnel chart
severinlandolt Dec 11, 2024
e7900f3
update donut chart
severinlandolt Dec 12, 2024
85e491c
bars
severinlandolt Dec 12, 2024
a7e19db
line chart
severinlandolt Dec 12, 2024
5042df5
scatter chart
severinlandolt Dec 12, 2024
17ba6d4
bar chart
severinlandolt Dec 12, 2024
e4bc2ac
update area chart
severinlandolt Dec 12, 2024
6ac0cc7
cleanup
severinlandolt Dec 12, 2024
6d74ad1
gacp update charts
severinlandolt Dec 12, 2024
97b69eb
udpate badge
severinlandolt Dec 12, 2024
745f89a
Delete style.ts
severinlandolt Dec 12, 2024
a7d8bfa
clean up imports
severinlandolt Dec 12, 2024
4142f28
BREAKING CHANGE: Tremor v4
severinlandolt Dec 12, 2024
a5a3439
feat!: Tremor v4
severinlandolt Dec 12, 2024
573835c
feat!: Tremor v4 \n\n BREAKING CHANGE
severinlandolt Dec 12, 2024
c8582ef
fix: accordion exports
severinlandolt Dec 12, 2024
2e9753b
fix: Tremor v4 react19 (#1145)
severinlandolt Dec 13, 2024
48a767d
fix: dot stroke chart
severinlandolt Dec 14, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
bars
severinlandolt committed Dec 12, 2024
commit 85e491c97f681530191843ec2195302182693e01
2 changes: 1 addition & 1 deletion src/components/chart-elements/LineChart/LineChart.tsx
Original file line number Diff line number Diff line change
@@ -3,14 +3,14 @@ import React, { Fragment, useState } from "react";
import {
CartesianGrid,
Dot,
Label,
Legend,
Line,
LineChart as ReChartsLineChart,
ResponsiveContainer,
Tooltip,
XAxis,
YAxis,
Label,
} from "recharts";
import { AxisDomain } from "recharts/types/util/types";

62 changes: 12 additions & 50 deletions src/components/vis-elements/CategoryBar/CategoryBar.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,8 @@
"use client";
import React, { useMemo } from "react";
import { bgColors } from "components/spark-elements/common/style";
import Tooltip, { useTooltip } from "components/util-elements/Tooltip/Tooltip";
import {
getColorClassNames,
makeClassName,
sumNumericArray,
themeColorRange,
tremorTwMerge,
} from "lib";
import { colorPalette } from "lib/theme";
import { Color } from "../../../lib";

const makeCategoryBarClassName = makeClassName("CategoryBar");
import { Color, sumNumericArray, themeColorRange, tremorTwMerge } from "lib";
import React, { useMemo } from "react";

const getMarkerBgColor = (
markerValue: number | undefined,
@@ -23,7 +14,7 @@ const getMarkerBgColor = (
let prefixSum = 0;
for (let i = 0; i < values.length; i++) {
const currentWidthPercentage = values[i];
const currentBgColor = getColorClassNames(colors[i], colorPalette.background).bgColor;
const currentBgColor = bgColors[colors[i] as Color];

prefixSum += currentWidthPercentage;
if (prefixSum >= markerValue) return currentBgColor;
@@ -42,13 +33,7 @@ const BarLabels = ({ values }: { values: number[] }) => {
return (
<div
className={tremorTwMerge(
makeCategoryBarClassName("labels"),
// common
"text-tremor-default relative mb-2 flex h-5 w-full",
// light
"text-tremor-content",
// dark
"dark:text-dark-tremor-content",
"text-tremor-default text-tremor-content-default relative mb-2 flex h-5 w-full",
)}
>
{values.slice(0, values.length).map((widthPercentage, idx) => {
@@ -85,7 +70,7 @@ const BarLabels = ({ values }: { values: number[] }) => {
);
};

export interface CategoryBarProps extends React.HTMLAttributes<HTMLDivElement> {
interface CategoryBarProps extends React.HTMLAttributes<HTMLDivElement> {
values: number[];
colors?: Color[];
markerValue?: number;
@@ -123,21 +108,11 @@ const CategoryBar = React.forwardRef<HTMLDivElement, CategoryBarProps>((props, r
return (
<>
<Tooltip text={tooltip} {...tooltipProps} />
<div
ref={ref}
className={tremorTwMerge(makeCategoryBarClassName("root"), className)}
{...other}
>
<div ref={ref} className={tremorTwMerge(className)} {...other}>
{showLabels ? <BarLabels values={values} /> : null}
<div
className={tremorTwMerge(
makeCategoryBarClassName("barWrapper"),
"relative flex h-2 w-full items-center",
)}
>
<div className={tremorTwMerge("relative flex h-2 w-full items-center")}>
<div
className={tremorTwMerge(
// common
"rounded-tremor-full flex h-full flex-1 items-center overflow-hidden",
)}
>
@@ -147,11 +122,7 @@ const CategoryBar = React.forwardRef<HTMLDivElement, CategoryBarProps>((props, r
return (
<div
key={`item-${idx}`}
className={tremorTwMerge(
makeCategoryBarClassName("categoryBar"),
"h-full",
getColorClassNames(baseColor, colorPalette.background).bgColor,
)}
className={tremorTwMerge("h-full", bgColors[baseColor as Color])}
style={{ width: `${percentage}%` }}
/>
);
@@ -160,10 +131,7 @@ const CategoryBar = React.forwardRef<HTMLDivElement, CategoryBarProps>((props, r
{markerValue !== undefined ? (
<div
ref={tooltipProps.refs.setReference}
className={tremorTwMerge(
makeCategoryBarClassName("markerWrapper"),
"absolute right-1/2 w-5 -translate-x-1/2",
)}
className={tremorTwMerge("absolute right-1/2 w-5 -translate-x-1/2")}
style={{
left: `${markerPositionLeft}%`,
transition: showAnimation ? "all 1s" : "",
@@ -172,13 +140,7 @@ const CategoryBar = React.forwardRef<HTMLDivElement, CategoryBarProps>((props, r
>
<div
className={tremorTwMerge(
makeCategoryBarClassName("marker"),
// common
"rounded-tremor-full mx-auto h-4 w-1 ring-2",
// light
"ring-tremor-brand-inverted",
// dark
"dark:ring-dark-tremor-brand-inverted",
"rounded-tremor-full ring-tremor-brand-inverted mx-auto h-4 w-1 ring-2",
markerBgColor,
)}
/>
@@ -192,4 +154,4 @@ const CategoryBar = React.forwardRef<HTMLDivElement, CategoryBarProps>((props, r

CategoryBar.displayName = "CategoryBar";

export default CategoryBar;
export { CategoryBar, type CategoryBarProps };
2 changes: 1 addition & 1 deletion src/components/vis-elements/CategoryBar/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
export { default as CategoryBar } from "./CategoryBar";
export { CategoryBar } from "./CategoryBar";
export type { CategoryBarProps } from "./CategoryBar";
111 changes: 0 additions & 111 deletions src/components/vis-elements/DeltaBar/DeltaBar.tsx

This file was deleted.

2 changes: 0 additions & 2 deletions src/components/vis-elements/DeltaBar/index.ts

This file was deleted.

24 changes: 0 additions & 24 deletions src/components/vis-elements/DeltaBar/styles.ts

This file was deleted.

147 changes: 64 additions & 83 deletions src/components/vis-elements/MarkerBar/MarkerBar.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
"use client";
import React from "react";

import { bgColors } from "components/spark-elements/common/style";
import Tooltip, { useTooltip } from "components/util-elements/Tooltip/Tooltip";
import { getColorClassNames, makeClassName, tremorTwMerge } from "lib";
import { colorPalette } from "lib/theme";
import { tremorTwMerge } from "lib";
import { Color } from "../../../lib";

const makeMarkerBarClassName = makeClassName("MarkerBar");

export interface MarkerBarProps extends React.HTMLAttributes<HTMLDivElement> {
interface MarkerBarProps extends React.HTMLAttributes<HTMLDivElement> {
value: number;
minValue?: number;
maxValue?: number;
@@ -18,91 +16,74 @@ export interface MarkerBarProps extends React.HTMLAttributes<HTMLDivElement> {
color?: Color;
}

const MarkerBar = React.forwardRef<HTMLDivElement, MarkerBarProps>((props, ref) => {
const {
value,
minValue,
maxValue,
markerTooltip,
rangeTooltip,
showAnimation = false,
color,
className,
...other
} = props;

const { tooltipProps: markerTooltipProps, getReferenceProps: getMarkerReferenceProps } =
useTooltip();
const { tooltipProps: rangeTooltipProps, getReferenceProps: getRangeReferenceProps } =
useTooltip();
const MarkerBar = React.forwardRef<HTMLDivElement, MarkerBarProps>(
(
{
value,
minValue,
maxValue,
markerTooltip,
rangeTooltip,
showAnimation = false,
color = "brand",
className,
...other
},
ref,
) => {
const { tooltipProps: markerTooltipProps, getReferenceProps: getMarkerReferenceProps } =
useTooltip();
const { tooltipProps: rangeTooltipProps, getReferenceProps: getRangeReferenceProps } =
useTooltip();

return (
<div
ref={ref}
className={tremorTwMerge(
makeMarkerBarClassName("root"),
// common
"rounded-tremor-full relative flex h-2 w-full items-center",
// light
"bg-tremor-background-subtle",
// dark
"dark:bg-dark-tremor-background-subtle",
className,
)}
{...other}
>
{minValue !== undefined && maxValue !== undefined ? (
<>
<Tooltip text={rangeTooltip} {...rangeTooltipProps} />
<div
ref={rangeTooltipProps.refs.setReference}
className={tremorTwMerge(
makeMarkerBarClassName("rangeBar"),
// common
"rounded-tremor-full absolute h-full",
// light
"bg-tremor-content-subtle",
// dark
"dark:bg-dark-tremor-content-subtle",
)}
style={{
left: `${minValue}%`,
width: `${maxValue - minValue}%`,
transition: showAnimation ? "all duration-300" : "",
}}
{...getRangeReferenceProps}
/>
</>
) : null}
<Tooltip text={markerTooltip} {...markerTooltipProps} />
return (
<div
ref={markerTooltipProps.refs.setReference}
ref={ref}
className={tremorTwMerge(
makeMarkerBarClassName("markerWrapper"),
"absolute right-1/2 w-5 -translate-x-1/2",
"rounded-tremor-full bg-tremor-background-subtle relative flex h-2 w-full items-center",
className,
)}
style={{
left: `${value}%`,
transition: showAnimation ? "all 1s" : "",
}}
{...getMarkerReferenceProps}
{...other}
>
{minValue !== undefined && maxValue !== undefined ? (
<>
<Tooltip text={rangeTooltip} {...rangeTooltipProps} />
<div
ref={rangeTooltipProps.refs.setReference}
className={tremorTwMerge(
"rounded-tremor-full bg-tremor-content-subtle absolute h-full",
)}
style={{
left: `${minValue}%`,
width: `${maxValue - minValue}%`,
transition: showAnimation ? "all duration-300" : "",
}}
{...getRangeReferenceProps}
/>
</>
) : null}
<Tooltip text={markerTooltip} {...markerTooltipProps} />
<div
className={tremorTwMerge(
makeMarkerBarClassName("marker"),
"rounded-tremor-full mx-auto h-4 w-1 ring-2",
"ring-tremor-brand-inverted",
"dark:ring-dark-tremor-brand-inverted",
color
? getColorClassNames(color, colorPalette.background).bgColor
: "dark:bg-dark-tremor-brand bg-tremor-brand",
)}
/>
ref={markerTooltipProps.refs.setReference}
className={tremorTwMerge("absolute right-1/2 w-5 -translate-x-1/2")}
style={{
left: `${value}%`,
transition: showAnimation ? "all 1s" : "",
}}
{...getMarkerReferenceProps}
>
<div
className={tremorTwMerge(
"rounded-tremor-full ring-tremor-brand-inverted mx-auto h-4 w-1 ring-2",
bgColors[color as Color],
)}
/>
</div>
</div>
</div>
);
});
);
},
);

MarkerBar.displayName = "MarkerBar";

export default MarkerBar;
export { MarkerBar, type MarkerBarProps };
2 changes: 1 addition & 1 deletion src/components/vis-elements/MarkerBar/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
export { default as MarkerBar } from "./MarkerBar";
export { MarkerBar } from "./MarkerBar";
export type { MarkerBarProps } from "./MarkerBar";
1 change: 0 additions & 1 deletion src/components/vis-elements/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
export * from "./BarList";
export * from "./CategoryBar";
export * from "./DeltaBar";
export * from "./MarkerBar";
export * from "./ProgressBar";
export * from "./ProgressCircle";
13 changes: 0 additions & 13 deletions src/stories/list-elements/Table.stories.tsx
Original file line number Diff line number Diff line change
@@ -26,7 +26,6 @@ const data = [
sales: "1.000.000",
region: "Region A",
status: "overperforming",
deltaType: "moderateIncrease",
hours: 100,
},
{
@@ -35,7 +34,6 @@ const data = [
sales: "2.202.000",
region: "Region B",
status: "overperforming",
deltaType: "moderateIncrease",
hours: 110,
},
{
@@ -44,7 +42,6 @@ const data = [
sales: "1.505.000",
region: "Region C",
status: "underperforming",
deltaType: "moderateDecrease",
hours: 90,
},
{
@@ -53,7 +50,6 @@ const data = [
sales: "500000",
region: "Region D",
status: "overperforming",
deltaType: "moderateDecrease",
hours: 92,
},
{
@@ -62,7 +58,6 @@ const data = [
sales: "600000",
region: "Region E",
status: "underperforming",
deltaType: "moderateDecrease",
hours: 95,
},
{
@@ -71,7 +66,6 @@ const data = [
sales: "700000",
region: "Region F",
status: "overperforming",
deltaType: "moderateIncrease",
hours: 98,
},
{
@@ -80,7 +74,6 @@ const data = [
sales: "800000",
region: "Region G",
status: "average",
deltaType: "unchanged",
hours: 101,
},
{
@@ -89,7 +82,6 @@ const data = [
sales: "900000",
region: "Region H",
status: "overperforming",
deltaType: "moderateDecrease",
hours: 104,
},
{
@@ -98,7 +90,6 @@ const data = [
sales: "1000000",
region: "Region I",
status: "underperforming",
deltaType: "moderateIncrease",
hours: 107,
},
{
@@ -107,7 +98,6 @@ const data = [
sales: "1100000",
region: "Region J",
status: "average",
deltaType: "unchanged",
hours: 110,
},
{
@@ -116,7 +106,6 @@ const data = [
sales: "1200000",
region: "Region K",
status: "underperforming",
deltaType: "moderateDecrease",
hours: 113,
},
{
@@ -125,7 +114,6 @@ const data = [
sales: "1300000",
region: "Region L",
status: "overperforming",
deltaType: "moderateIncrease",
hours: 116,
},
{
@@ -134,7 +122,6 @@ const data = [
sales: "1400000",
region: "Region M",
status: "underperforming",
deltaType: "moderateDecrease",
hours: 119,
},
];
2 changes: 1 addition & 1 deletion src/stories/vis-elements/CategoryBar.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from "react";

import type { Meta, StoryObj } from "@storybook/react";
import CategoryBar from "components/vis-elements/CategoryBar/CategoryBar";
import { CategoryBar } from "components";

const meta: Meta<typeof CategoryBar> = {
title: "Visualizations/Vis/CategoryBar",
37 changes: 0 additions & 37 deletions src/stories/vis-elements/DeltaBar.stories.tsx

This file was deleted.

3 changes: 2 additions & 1 deletion src/stories/vis-elements/MarkerBar.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React from "react";

import type { Meta, StoryObj } from "@storybook/react";
import MarkerBar from "components/vis-elements/MarkerBar/MarkerBar";

import { MarkerBar } from "components";
import { BaseColors } from "lib/constants";

const meta: Meta<typeof MarkerBar> = {
3 changes: 1 addition & 2 deletions src/tests/vis-elements/CategoryBar.test.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
/* eslint-disable no-undef */
import { render } from "@testing-library/react";
import { CategoryBar } from "components";
import React from "react";

import CategoryBar from "components/vis-elements/CategoryBar/CategoryBar";

describe("CategoryBar", () => {
test("renders the CategoryBar component with default props", () => {
render(<CategoryBar values={[10, 25, 45, 20]} />);
11 changes: 0 additions & 11 deletions src/tests/vis-elements/DeltaBar.test.tsx

This file was deleted.

3 changes: 1 addition & 2 deletions src/tests/vis-elements/MarkerBar.test.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
/* eslint-disable no-undef */
import { render } from "@testing-library/react";
import { MarkerBar } from "components";
import React from "react";

import MarkerBar from "components/vis-elements/MarkerBar/MarkerBar";

describe("MarkerBar", () => {
test("renders the MarkerBar component with default props", () => {
render(<MarkerBar value={50} />);