diff --git a/apps/docs/src/content/components/data-visualisation/cartesian-chart/examples/bar.tsx b/apps/docs/src/content/components/data-visualisation/cartesian-chart/examples/bar.tsx new file mode 100644 index 0000000000..f7cccf1f21 --- /dev/null +++ b/apps/docs/src/content/components/data-visualisation/cartesian-chart/examples/bar.tsx @@ -0,0 +1,62 @@ +import { + typedCartesianChart, + Heading, + Section, +} from "@mittwald/flow-react-components"; + +export default () => { + const data = [ + { + Monat: "Juli", + Datenbanken: 10, + Webspace: 15.4, + Email: 5.1, + }, + { + Monat: "August", + Datenbanken: 32.9, + Webspace: 25.6, + Email: 10, + }, + { + Monat: "September", + Datenbanken: 40, + Webspace: 20.2, + Email: 8, + }, + ]; + + const CartesianChart = typedCartesianChart<{ + Monat: string; + Datenbanken: number; + Webspace: number; + Email: number; + }>(); + + return ( +
+ Speicherplatz + + + + + + + + + + +
+ ); +}; diff --git a/apps/docs/src/content/components/data-visualisation/cartesian-chart/examples/barHorizontal.tsx b/apps/docs/src/content/components/data-visualisation/cartesian-chart/examples/barHorizontal.tsx new file mode 100644 index 0000000000..2f8ee4ea4d --- /dev/null +++ b/apps/docs/src/content/components/data-visualisation/cartesian-chart/examples/barHorizontal.tsx @@ -0,0 +1,38 @@ +import { + typedCartesianChart, + Heading, + Section, +} from "@mittwald/flow-react-components"; + +export default () => { + const data = [ + { Projekt: "Projekt A", Speicherplatz: 68 }, + { Projekt: "Projekt B", Speicherplatz: 42 }, + { Projekt: "Projekt C", Speicherplatz: 21 }, + ]; + + const CartesianChart = typedCartesianChart<{ + Projekt: string; + Speicherplatz: number; + }>(); + + return ( +
+ Speicherplatz pro Projekt + + + + + + + +
+ ); +}; diff --git a/apps/docs/src/content/components/data-visualisation/cartesian-chart/examples/barStacked.tsx b/apps/docs/src/content/components/data-visualisation/cartesian-chart/examples/barStacked.tsx new file mode 100644 index 0000000000..1bddcc3836 --- /dev/null +++ b/apps/docs/src/content/components/data-visualisation/cartesian-chart/examples/barStacked.tsx @@ -0,0 +1,65 @@ +import { + typedCartesianChart, + Heading, + Section, +} from "@mittwald/flow-react-components"; + +export default () => { + const data = [ + { + Monat: "Juli", + Datenbanken: 10, + Webspace: 15.4, + Email: 5.1, + }, + { + Monat: "August", + Datenbanken: 32.9, + Webspace: 25.6, + Email: 10, + }, + { + Monat: "September", + Datenbanken: 40, + Webspace: 20.2, + Email: 8, + }, + ]; + + const CartesianChart = typedCartesianChart<{ + Monat: string; + Datenbanken: number; + Webspace: number; + Email: number; + }>(); + + return ( +
+ Speicherplatz + + + + + + + + + + +
+ ); +}; diff --git a/apps/docs/src/content/components/data-visualisation/cartesian-chart/index.mdx b/apps/docs/src/content/components/data-visualisation/cartesian-chart/index.mdx index 35a1baaf90..88c9d77687 100644 --- a/apps/docs/src/content/components/data-visualisation/cartesian-chart/index.mdx +++ b/apps/docs/src/content/components/data-visualisation/cartesian-chart/index.mdx @@ -1,8 +1,8 @@ --- component: CartesianChart description: - Das CartesianChart stellt Metriken über Zeit als Liniendiagramm oder - Flächendiagramm dar. + Das CartesianChart stellt Metriken als Linien-, Flächen- oder Balkendiagramm + dar. --- @@ -16,13 +16,16 @@ description: [Categorical Colors](/foundations/design/colors#categorical-color) dar. - Sortiere die Areas bei der Area-Darstellung nach Größe, die größte unten. - Halte die Zahl der Dimensionen übersichtlich. Das sichert die Lesbarkeit. +- Bei der Bar-Darstellung darf die x-Achse auch kategorisch sein. Balken + vergleichen Kategorien, nicht nur Zeitpunkte. +- Stapele Balken nur dort, wo die Summe eine Bedeutung hat. --- # Darstellungstypen Im CartesianChart können unterschiedliche Darstellungstypen wie ``, -`` oder eine Kombination aus beiden verwendet werden. +``, `` oder eine Kombination daraus verwendet werden. ## Line @@ -38,6 +41,32 @@ Anteil einzelner Objekte daran. +## Bar + +Vergleicht Werte einzelner Kategorien miteinander. Ohne `stackId` stehen die +Balken einer Kategorie nebeneinander. + + + +Mehrere `` mit derselben `stackId` werden gestapelt. Das zeigt den Anteil +einzelner Objekte am Gesamtwert einer Kategorie. + + + +### Ausrichtung + +Die Property `layout` bestimmt, wo die Kategorie-Achse liegt. Mit dem Default +`horizontal` liegt sie auf der x-Achse, die Balken wachsen nach oben. Mit +`vertical` liegt sie auf der y-Achse und die Balken wachsen zur Seite. Der +`dataKey` wandert dabei auf die ``, die Achsentypen ergeben sich von +selbst. + +Nutze die vertikale Ausrichtung für lange Kategorie-Namen oder für viele +Kategorien. Nur Balken lassen sich sinnvoll drehen. `` und `` +zeigen einen Verlauf und bleiben horizontal. + + + --- # Color diff --git a/apps/remote-dom-demo/src/app/remote/chart/page.tsx b/apps/remote-dom-demo/src/app/remote/chart/page.tsx index 4d1ffe8dcc..c48ab747a6 100644 --- a/apps/remote-dom-demo/src/app/remote/chart/page.tsx +++ b/apps/remote-dom-demo/src/app/remote/chart/page.tsx @@ -2,6 +2,7 @@ import { Area, + Bar, CartesianChart, CartesianGrid, ChartTooltip, @@ -69,11 +70,32 @@ export default function Page() { ); }; + const BarChart: FC<{ layout: "horizontal" | "vertical" }> = ({ layout }) => { + const vertical = layout === "vertical"; + + return ( + + + + + {vertical ? : } + {vertical ? ( + + ) : ( + + )} + + + ); + }; + return ( <> + + ); } diff --git a/packages/components/src/components/CartesianChart/CartesianChart.tsx b/packages/components/src/components/CartesianChart/CartesianChart.tsx index e3280d8da6..afbf088a4c 100644 --- a/packages/components/src/components/CartesianChart/CartesianChart.tsx +++ b/packages/components/src/components/CartesianChart/CartesianChart.tsx @@ -14,10 +14,13 @@ import { useChartClipRect } from "@/components/CartesianChart/hooks/useChartClip import DivView from "@/views/DivView"; import Wrap from "@/components/Wrap"; import type { + CartesianChartLayout, ChartDataValue, DataKeyProp, } from "@/components/CartesianChart/types"; +import { CartesianChartContextProvider } from "@/components/CartesianChart/context"; import { TypedArea } from "@/components/CartesianChart/components/Area"; +import { TypedBar } from "@/components/CartesianChart/components/Bar"; import { TypedXAxis } from "@/components/CartesianChart/components/XAxis"; import { TypedYAxis } from "@/components/CartesianChart/components/YAxis"; import { TypedChartGrid } from "@/components/CartesianChart/components/ChartGrid"; @@ -44,6 +47,17 @@ export interface CartesianChartProps /** The height of the chart. */ height?: string; + /** + * The orientation of the axes and graphical items. `"horizontal"` puts the + * category axis on the x-axis — bars grow upwards. `"vertical"` puts it on + * the y-axis — bars grow to the side. `XAxis` and `YAxis` follow the layout + * on their own; only the `dataKey` moves to whichever axis is the categorical + * one. + * + * @default "horizontal" + */ + layout?: CartesianChartLayout; + /** View that is provided when data is empty/undefined */ emptyView?: ReactNode; @@ -56,8 +70,16 @@ export interface CartesianChartProps /** @flr-generate all */ export const CartesianChart: FC = (props) => { - const { children, data, className, height, flexGrow, emptyView, ...rest } = - props; + const { + children, + data, + className, + height, + flexGrow, + emptyView, + layout = "horizontal", + ...rest + } = props; const warnDeprecation = useWarnDeprecation(); const { viewDimensions, ref: containerRef } = useChartClipRect(); @@ -88,32 +110,41 @@ export const CartesianChart: FC = (props) => { return null; }, [emptyView]); + const contextValue = useMemo(() => ({ layout }), [layout]); + return ( - -
- - - {children} - {showEmptyView && viewDimensions && ( - - - {emptyElement} - - - )} - - -
- + + +
+ + + {children} + {showEmptyView && viewDimensions && ( + + + {emptyElement} + + + )} + + +
+ + ); }; @@ -124,6 +155,7 @@ export const typedCartesianChart = < >() => ({ Chart: CartesianChart as ComponentType>, Area: TypedArea(), + Bar: TypedBar(), XAxis: TypedXAxis(), YAxis: TypedYAxis(), Grid: TypedChartGrid(), diff --git a/packages/components/src/components/CartesianChart/components/Bar/Bar.tsx b/packages/components/src/components/CartesianChart/components/Bar/Bar.tsx new file mode 100644 index 0000000000..bfc366303e --- /dev/null +++ b/packages/components/src/components/CartesianChart/components/Bar/Bar.tsx @@ -0,0 +1,76 @@ +import { type ComponentType, type FC } from "react"; +import * as Recharts from "recharts"; +import type { CategoricalWithCustomColor } from "@/lib/tokens/CategoricalColors"; +import { isCategoricalColor } from "@/lib/tokens/isCategoricalColor"; +import { + type ChartDataValue, + type DataKeyProp, + type DataKeyWithLabel, + isDataKeyWithLabel, +} from "@/components/CartesianChart/types"; +import { useCartesianChartContext } from "@/components/CartesianChart/context"; +import { useDesignTokens } from "@/lib/theming"; + +type BarBaseProps = Pick< + Recharts.BarProps, + | "className" + | "stackId" + | "key" + | "xAxisId" + | "yAxisId" + | "unit" + | "barSize" + | "maxBarSize" + | "minPointSize" +> & { + /** The color of the bar. @default "sea-green" */ + color?: CategoricalWithCustomColor; +}; + +export interface BarPropsByDataKeyProp< + TData extends ChartDataValue = ChartDataValue, +> extends BarBaseProps { + dataKey: DataKeyProp; +} + +export interface BarPropsByDataKey< + TData extends ChartDataValue = ChartDataValue, +> + extends BarBaseProps, DataKeyWithLabel {} + +export type BarProps = + BarPropsByDataKey | BarPropsByDataKeyProp; + +/** @flr-generate all */ +export const Bar: FC = (props) => { + const { color: colorFromProps = "sea-green", ...rest } = props; + + const tokens = useDesignTokens(); + const { layout } = useCartesianChartContext(); + + const color = isCategoricalColor(colorFromProps) + ? `var(--color--categorical--${colorFromProps})` + : colorFromProps; + + const cornerRadius = parseInt(tokens.bar["corner-radius"].value); + const radius: Recharts.BarProps["radius"] = + props.stackId !== undefined + ? 0 + : layout === "vertical" + ? [0, cornerRadius, cornerRadius, 0] + : [cornerRadius, cornerRadius, 0, 0]; + + return ( + + ); +}; + +export const TypedBar = () => + Bar as ComponentType>; + +export default Bar; diff --git a/packages/components/src/components/CartesianChart/components/Bar/index.ts b/packages/components/src/components/CartesianChart/components/Bar/index.ts new file mode 100644 index 0000000000..77f082917d --- /dev/null +++ b/packages/components/src/components/CartesianChart/components/Bar/index.ts @@ -0,0 +1,2 @@ +export { default } from "./Bar"; +export * from "./Bar"; diff --git a/packages/components/src/components/CartesianChart/components/Bar/view.ts b/packages/components/src/components/CartesianChart/components/Bar/view.ts new file mode 100644 index 0000000000..f900348858 --- /dev/null +++ b/packages/components/src/components/CartesianChart/components/Bar/view.ts @@ -0,0 +1,10 @@ +/* prettier-ignore */ +/* This file is auto-generated with the remote-components-generator */ +import type { Bar } from "./Bar"; +import type { ViewComponent } from "@/lib/viewComponentContext"; + +declare global { + interface FlowViewComponents { + Bar: ViewComponent; + } +} diff --git a/packages/components/src/components/CartesianChart/components/XAxis/XAxis.tsx b/packages/components/src/components/CartesianChart/components/XAxis/XAxis.tsx index cbbb3da78e..4690b07853 100644 --- a/packages/components/src/components/CartesianChart/components/XAxis/XAxis.tsx +++ b/packages/components/src/components/CartesianChart/components/XAxis/XAxis.tsx @@ -31,11 +31,14 @@ export type XAxisProps< /** @flr-generate all */ export const XAxis: FC = (props) => { + const { type = "auto", ...rest } = props; + const tokens = useDesignTokens(); return ( = (props) => { - const { domain, ...rest } = props; + const { domain, type = "auto", ...rest } = props; const tokens = useDesignTokens(); @@ -39,6 +39,7 @@ export const YAxis: FC = (props) => { {...rest} allowDataOverflow domain={domain} + type={type} fontSize={tokens.axis["font-size"].value} tick={{ fill: tokens.axis["color"].value, diff --git a/packages/components/src/components/CartesianChart/context.ts b/packages/components/src/components/CartesianChart/context.ts new file mode 100644 index 0000000000..615230f7ac --- /dev/null +++ b/packages/components/src/components/CartesianChart/context.ts @@ -0,0 +1,15 @@ +import { createContext, useContext } from "react"; +import type { CartesianChartLayout } from "@/components/CartesianChart/types"; + +interface CartesianChartContext { + layout: CartesianChartLayout; +} + +const cartesianChartContext = createContext({ + layout: "horizontal", +}); + +export const useCartesianChartContext = (): CartesianChartContext => + useContext(cartesianChartContext); + +export const CartesianChartContextProvider = cartesianChartContext.Provider; diff --git a/packages/components/src/components/CartesianChart/index.ts b/packages/components/src/components/CartesianChart/index.ts index 43584d2000..c87c43ce79 100644 --- a/packages/components/src/components/CartesianChart/index.ts +++ b/packages/components/src/components/CartesianChart/index.ts @@ -7,6 +7,7 @@ export { } from "./CartesianChart"; export * from "./components/Area"; export * from "./components/AreaDot"; +export * from "./components/Bar"; export * from "./components/Line"; export * from "./components/ChartTooltip"; export * from "./components/ChartGrid"; diff --git a/packages/components/src/components/CartesianChart/stories/Default.stories.tsx b/packages/components/src/components/CartesianChart/stories/Default.stories.tsx index e0bea44c78..777bcfbc9e 100644 --- a/packages/components/src/components/CartesianChart/stories/Default.stories.tsx +++ b/packages/components/src/components/CartesianChart/stories/Default.stories.tsx @@ -1,6 +1,8 @@ import type { Meta, StoryObj } from "@storybook/react"; import CartesianChart, { typedCartesianChart } from "../CartesianChart"; import Area from "../components/Area"; +import Bar from "../components/Bar"; +import Line from "../components/Line"; import IllustratedMessage from "@/components/IllustratedMessage"; import { Heading, IconMonitoring } from "@/components/public"; import ChartTooltip from "@/components/CartesianChart/components/ChartTooltip/ChartTooltip"; @@ -283,3 +285,62 @@ export const WithIntlNumberFormat: Story = { ), }; + +export const WithBars: Story = { + render: (props) => ( + + + + + + + + + + + ), +}; + +export const WithStackedBars: Story = { + render: (props) => ( + + + + + + + + + + + ), +}; + +export const WithHorizontalBars: Story = { + render: (props) => ( + + + + + + + + + + ), +}; + +export const WithBarsAndLine: Story = { + render: (props) => ( + + + + + + + + + + + ), +}; diff --git a/packages/components/src/components/CartesianChart/typedCartesianChart.test-types.tsx b/packages/components/src/components/CartesianChart/typedCartesianChart.test-types.tsx index 46f68dbfb2..8205e6dd34 100644 --- a/packages/components/src/components/CartesianChart/typedCartesianChart.test-types.tsx +++ b/packages/components/src/components/CartesianChart/typedCartesianChart.test-types.tsx @@ -6,6 +6,7 @@ import { ChartLegend } from "@/components/CartesianChart/components/ChartLegend" import { XAxis } from "@/components/CartesianChart/components/XAxis"; import type { ChartDataValue } from "@/components/CartesianChart/types"; import { Area } from "@/components/CartesianChart/components/Area"; +import { Bar } from "@/components/CartesianChart/components/Bar"; interface ChartData { time: Date; @@ -34,6 +35,17 @@ function filters() { 3} />; } + // eslint-disable-next-line @typescript-eslint/no-unused-vars + function testKnownBarProperty() { + ; + } + + // eslint-disable-next-line @typescript-eslint/no-unused-vars + function testUnknownBarProperty() { + // @ts-expect-error Is unknown + ; + } + // eslint-disable-next-line @typescript-eslint/no-unused-vars function testLegendFormatter() { ; } + + // eslint-disable-next-line @typescript-eslint/no-unused-vars + function testUntypedBarWithDataKeyAndLabel() { + ; + { + expectTypeOf(data).toMatchTypeOf(); + return 1337; + }} + dataKeyLabel={"foo"} + />; + } + + // eslint-disable-next-line @typescript-eslint/no-unused-vars + function testUntypedBarWithDataKeyMissingLabel() { + // @ts-expect-error Is unknown + { + expectTypeOf(data).toMatchTypeOf(); + return 1337; + }} + />; + } } diff --git a/packages/components/src/components/CartesianChart/types.ts b/packages/components/src/components/CartesianChart/types.ts index 5dc623d591..1ecf7e2abf 100644 --- a/packages/components/src/components/CartesianChart/types.ts +++ b/packages/components/src/components/CartesianChart/types.ts @@ -37,3 +37,10 @@ export const isDataKeyWithLabel = ( typeof obj.dataKeyLabel === "string" ); }; + +/** + * The orientation of the chart's axes and graphical items. `"horizontal"` puts + * the category axis on the x-axis (bars grow upwards), `"vertical"` puts it on + * the y-axis (bars grow to the side). + */ +export type CartesianChartLayout = "horizontal" | "vertical"; diff --git a/packages/components/src/views/BarView.tsx b/packages/components/src/views/BarView.tsx new file mode 100644 index 0000000000..293f96dbe3 --- /dev/null +++ b/packages/components/src/views/BarView.tsx @@ -0,0 +1,16 @@ +/* prettier-ignore */ +/* This file is auto-generated with the remote-components-generator */ +import React, { memo, type FC, useContext } from "react"; +import { + Bar, + type BarProps, +} from "@/components/CartesianChart/components/Bar/Bar"; +import { viewComponentContext } from "@/lib/viewComponentContext/viewComponentContext"; + +const BarView: FC = memo((props) => { + const View = useContext(viewComponentContext)["Bar"] ?? Bar; + return ; +}); +BarView.displayName = "BarView"; + +export default BarView; diff --git a/packages/design-tokens/src/dataVisualisation/bar.yml b/packages/design-tokens/src/dataVisualisation/bar.yml new file mode 100644 index 0000000000..fff0a7bb4f --- /dev/null +++ b/packages/design-tokens/src/dataVisualisation/bar.yml @@ -0,0 +1,3 @@ +bar: + corner-radius: + value: "{corner-radius.s}" diff --git a/packages/remote-elements/src/auto-generated/RemoteBarElement.ts b/packages/remote-elements/src/auto-generated/RemoteBarElement.ts new file mode 100644 index 0000000000..2699bf60d8 --- /dev/null +++ b/packages/remote-elements/src/auto-generated/RemoteBarElement.ts @@ -0,0 +1,43 @@ +/* prettier-ignore */ +/* This file is auto-generated with the remote-components-generator */ +import { FlowRemoteElement } from "@/lib/FlowRemoteElement"; +import type { BarProps as RemoteBarElementProps } from "@mittwald/flow-react-components"; +export type { BarProps as RemoteBarElementProps } from "@mittwald/flow-react-components"; + +export class RemoteBarElement extends FlowRemoteElement { + static override get remoteAttributes() { + return ["style"]; + } + + static override get remoteProperties() { + return { + barSize: {}, + className: {}, + color: {}, + dataKey: {}, + dataKeyLabel: {}, + maxBarSize: {}, + minPointSize: {}, + stackId: {}, + unit: {}, + xAxisId: {}, + yAxisId: {}, + }; + } + + static override get remoteEvents() { + return {}; + } + + static override get remoteSlots() { + return []; + } +} + +declare global { + interface HTMLElementTagNameMap { + "flr-bar": InstanceType; + } +} + +customElements.define("flr-bar", RemoteBarElement); diff --git a/packages/remote-elements/src/auto-generated/RemoteCartesianChartElement.ts b/packages/remote-elements/src/auto-generated/RemoteCartesianChartElement.ts index 64acc3e8ba..061eb47608 100644 --- a/packages/remote-elements/src/auto-generated/RemoteCartesianChartElement.ts +++ b/packages/remote-elements/src/auto-generated/RemoteCartesianChartElement.ts @@ -15,6 +15,7 @@ export class RemoteCartesianChartElement extends FlowRemoteElement { + await render( + + + + + + + + + , + ); + + await testScreenshot("CartesianChart with Bars"); + }, +); + +test.each(testEnvironments)( + "CartesianChart with stacked Bars (%s)", + async ({ + testScreenshot, + render, + components: { CartesianChart, ChartGrid, Bar, XAxis, YAxis, ChartLegend }, + }) => { + await render( + + + + + + + + , + ); + + await testScreenshot("CartesianChart with stacked Bars"); + }, +); + +test.each(testEnvironments)( + "CartesianChart with horizontal Bars (%s)", + async ({ + testScreenshot, + render, + components: { CartesianChart, ChartGrid, Bar, XAxis, YAxis, ChartLegend }, + }) => { + await render( + + + + + + + + , + ); + + await testScreenshot("CartesianChart with horizontal Bars"); + }, +); diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-Bars-firefox-darwin.png b/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-Bars-firefox-darwin.png new file mode 100644 index 0000000000..1b83818e99 Binary files /dev/null and b/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-Bars-firefox-darwin.png differ diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-Bars-firefox-linux.png b/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-Bars-firefox-linux.png new file mode 100644 index 0000000000..6007cdd4ec Binary files /dev/null and b/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-Bars-firefox-linux.png differ diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-Bars-webkit-darwin.png b/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-Bars-webkit-darwin.png new file mode 100644 index 0000000000..631e880b30 Binary files /dev/null and b/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-Bars-webkit-darwin.png differ diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-Bars-webkit-linux.png b/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-Bars-webkit-linux.png new file mode 100644 index 0000000000..8ac0988f56 Binary files /dev/null and b/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-Bars-webkit-linux.png differ diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-horizontal-Bars-firefox-darwin.png b/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-horizontal-Bars-firefox-darwin.png new file mode 100644 index 0000000000..13014d401c Binary files /dev/null and b/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-horizontal-Bars-firefox-darwin.png differ diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-horizontal-Bars-firefox-linux.png b/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-horizontal-Bars-firefox-linux.png new file mode 100644 index 0000000000..edd8d188f5 Binary files /dev/null and b/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-horizontal-Bars-firefox-linux.png differ diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-horizontal-Bars-webkit-darwin.png b/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-horizontal-Bars-webkit-darwin.png new file mode 100644 index 0000000000..e2aa2c12d2 Binary files /dev/null and b/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-horizontal-Bars-webkit-darwin.png differ diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-horizontal-Bars-webkit-linux.png b/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-horizontal-Bars-webkit-linux.png new file mode 100644 index 0000000000..b700eb8349 Binary files /dev/null and b/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-horizontal-Bars-webkit-linux.png differ diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-stacked-Bars-firefox-darwin.png b/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-stacked-Bars-firefox-darwin.png new file mode 100644 index 0000000000..cb5904d703 Binary files /dev/null and b/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-stacked-Bars-firefox-darwin.png differ diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-stacked-Bars-firefox-linux.png b/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-stacked-Bars-firefox-linux.png new file mode 100644 index 0000000000..f764db6262 Binary files /dev/null and b/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-stacked-Bars-firefox-linux.png differ diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-stacked-Bars-webkit-darwin.png b/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-stacked-Bars-webkit-darwin.png new file mode 100644 index 0000000000..3e3f9bea6f Binary files /dev/null and b/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-stacked-Bars-webkit-darwin.png differ diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-stacked-Bars-webkit-linux.png b/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-stacked-Bars-webkit-linux.png new file mode 100644 index 0000000000..b2eb8a96e9 Binary files /dev/null and b/packages/remote-react-components/src/tests/visual/__screenshots__/CartesianChart.browser.test.tsx/CartesianChart-with-stacked-Bars-webkit-linux.png differ diff --git a/packages/remote-react-renderer/src/auto-generated/index.ts b/packages/remote-react-renderer/src/auto-generated/index.ts index 9265ea56e4..b1a3e9f396 100644 --- a/packages/remote-react-renderer/src/auto-generated/index.ts +++ b/packages/remote-react-renderer/src/auto-generated/index.ts @@ -14,6 +14,7 @@ import { Autocomplete as Autocomplete } from "@mittwald/flow-react-components"; import { Avatar as Avatar } from "@mittwald/flow-react-components"; import { AvatarStack as AvatarStack } from "@mittwald/flow-react-components"; import { Badge as Badge } from "@mittwald/flow-react-components"; +import { Bar as Bar } from "@mittwald/flow-react-components"; import { BigNumber as BigNumber } from "@mittwald/flow-react-components"; import { Breadcrumb as Breadcrumb } from "@mittwald/flow-react-components"; import { Button as Button } from "@mittwald/flow-react-components"; @@ -161,6 +162,7 @@ export const flowComponents = { AvatarStack, ), "flr-badge": createFlowRemoteComponentRenderer("Badge", Badge), + "flr-bar": createFlowRemoteComponentRenderer("Bar", Bar), "flr-big-number": createFlowRemoteComponentRenderer("BigNumber", BigNumber), "flr-breadcrumb": createFlowRemoteComponentRenderer("Breadcrumb", Breadcrumb), "flr-button": createFlowRemoteComponentRenderer("Button", Button),