Merge pull request #218 from infosum/bar-chart-labels

Bar chart labels
infosum · Nov 13, 2023 · 82f1cb5 · 82f1cb5
2 parents 6d31c55 + 0cd7cd1
commit 82f1cb5
Show file tree

Hide file tree

Showing 92 changed files with 276 additions and 270 deletions.
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/report.html b/dist/report.html
diff --git a/dist/types/src/BarChart.d.ts b/dist/types/src/BarChart.d.ts
@@ -50,6 +50,8 @@ type Props = {
         rx?: number;
         ry?: number;
     };
+    /** @description nodes rendered after/above the bars */
+    labels?: string[];
 };
-export declare const BarChart: ({ animation, axisLabelFormat, colorScheme, data, direction, grid, id, groupLayout, height, LabelComponent, padding, showLabels, tip, visible, width, xAxisHeight, xAxisLabelOrientation, yAxisWidth, tickValues, bars, title, axis, }: Props) => JSX.Element | null;
+export declare const BarChart: ({ animation, axisLabelFormat, colorScheme, data, direction, grid, id, groupLayout, height, LabelComponent, padding, showLabels, tip, visible, width, xAxisHeight, xAxisLabelOrientation, yAxisWidth, tickValues, bars, title, axis, labels, }: Props) => JSX.Element | null;
 export {};
diff --git a/dist/types/src/components/Bars/Bars.d.ts b/dist/types/src/components/Bars/Bars.d.ts
@@ -12,6 +12,7 @@ export type Props = {
     direction?: EChartDirection;
     id?: string;
     groupLayout?: EGroupedBarLayout;
+    /** @description Height of the bar render area */
     height: number;
     hoverColorScheme?: ColorScheme;
     LabelComponent?: TLabelComponent;

diff --git a/dist/types/src/components/Bars/barHelper.d.ts b/dist/types/src/components/Bars/barHelper.d.ts
@@ -69,3 +69,4 @@ export declare const buildBarSprings: (props: BarSpringProps) => ({
  * This should provide us with the finishing location for the bar's y position.
  */
 export declare const getValueOffset: (item: ExtendedGroupItem, props: BarSpringProps) => any;
+export declare const shouldShowLabel: (item: ExtendedGroupItem, visible: Record<string, boolean>, showLabels: boolean[]) => boolean;
diff --git a/dist/types/src/components/Bars/barHelper.spec.d.ts b/dist/types/src/components/Bars/barHelper.spec.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/dist/types/src/components/Label.d.ts b/dist/types/src/components/Label.d.ts
@@ -1,13 +1,18 @@
 /// <reference types="react" />
+import { SpringValue } from "@react-spring/web";
 import { EChartDirection } from "../BarChart";
 import { ExtendedGroupItem } from "./Bars/Bars";
-type Props = {
+export type Props = {
     direction?: EChartDirection;
-    label?: string;
-    item: ExtendedGroupItem;
     fill?: string;
     inverse?: boolean;
+    item: ExtendedGroupItem;
+    height: SpringValue<number>;
+    containerHeight: number;
+    x: SpringValue<number>;
+    y: SpringValue<number>;
+    width: SpringValue<number>;
+    label?: string;
 };
 export type TLabelComponent = (props: Props) => JSX.Element;
-export declare const Label: ({ direction, label, item, fill, inverse, }: Props) => JSX.Element;
-export {};
+export declare const Label: ({ fill, height, width, x, y, direction, item, inverse, containerHeight, label, }: Props) => JSX.Element;
diff --git a/docs/404.html b/docs/404.html
@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="generator" content="Gatsby 4.25.7"/><style data-styled="" data-styled-version="5.3.3"></style></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><main style="color:#232129;padding:96px;font-family:-apple-system, Roboto, sans-serif, serif"><title>Not found</title><h1 style="margin-top:0;margin-bottom:64px;max-width:320px">Page not found</h1><p style="margin-bottom:48px">Sorry<!-- --> <span role="img" aria-label="Pensive emoji">😔</span> <!-- -->we couldn’t find what you were looking for.<br/><br/><a href="/cl-react-graph/">Go home</a>.</p></main></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/404.html";window.___webpackCompilationHash="9276b5d1656c0c092289";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-3a5c885b38de3686a087.js"],"app":["/app-31d1edab19a40b2bf9b4.js"],"component---src-pages-404-tsx":["/component---src-pages-404-tsx-3ecdc8908907038743e5.js"],"component---src-pages-area-fill-tsx":["/component---src-pages-area-fill-tsx-0be2660cb17e2acb5bbf.js"],"component---src-pages-axis-tsx":["/component---src-pages-axis-tsx-7fc6f6eb157f8d896d86.js"],"component---src-pages-bar-chart-tsx":["/component---src-pages-bar-chart-tsx-c09ffe52d6dc608b7c23.js"],"component---src-pages-bars-tsx":["/component---src-pages-bars-tsx-f93ca89171776f0b27b7.js"],"component---src-pages-brush-tsx":["/component---src-pages-brush-tsx-aec26b6d430e6e561555.js"],"component---src-pages-chord-tsx":["/component---src-pages-chord-tsx-cd8439cc5af90900274c.js"],"component---src-pages-getting-started-tsx":["/component---src-pages-getting-started-tsx-7633855eb625ad2cc626.js"],"component---src-pages-grid-tsx":["/component---src-pages-grid-tsx-6a9ba35d9e00e9fc010e.js"],"component---src-pages-histogram-tsx":["/component---src-pages-histogram-tsx-2cdf32585a3579f14f6a.js"],"component---src-pages-index-tsx":["/component---src-pages-index-tsx-e454ef042d6e35ddc020.js"],"component---src-pages-joyplot-tsx":["/component---src-pages-joyplot-tsx-b5e51f0cf6123ce4d693.js"],"component---src-pages-label-tsx":["/component---src-pages-label-tsx-148c1f514d5e1d900a91.js"],"component---src-pages-line-tsx":["/component---src-pages-line-tsx-1c992197870537cdaf4c.js"],"component---src-pages-map-tsx":["/component---src-pages-map-tsx-21095f38b36d1257dc90.js"],"component---src-pages-path-tsx":["/component---src-pages-path-tsx-6c54aefdcd5086b79b75.js"],"component---src-pages-pie-tsx":["/component---src-pages-pie-tsx-28e63cce400fc13dd95f.js"],"component---src-pages-point-tsx":["/component---src-pages-point-tsx-47079f3a28a4be2c7b17.js"],"component---src-pages-radar-tsx":["/component---src-pages-radar-tsx-c5273d55d6b8721a8b81.js"],"component---src-pages-scatter-tsx":["/component---src-pages-scatter-tsx-e9772446015a44ca9ea9.js"],"component---src-pages-tornado-tsx":["/component---src-pages-tornado-tsx-66f61d74549789b95f40.js"],"component---src-pages-upset-tsx":["/component---src-pages-upset-tsx-25908bacde6713ab6dac.js"]};/*]]>*/</script><script src="/cl-react-graph/polyfill-3a5c885b38de3686a087.js" nomodule=""></script><script src="/cl-react-graph/app-31d1edab19a40b2bf9b4.js" async=""></script><script src="/cl-react-graph/framework-be0f29fe10d2c8b3047b.js" async=""></script><script src="/cl-react-graph/webpack-runtime-b72e72e6dcbbc9813c76.js" async=""></script></body></html>
+<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="generator" content="Gatsby 4.25.7"/><style data-styled="" data-styled-version="5.3.3"></style></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><main style="color:#232129;padding:96px;font-family:-apple-system, Roboto, sans-serif, serif"><title>Not found</title><h1 style="margin-top:0;margin-bottom:64px;max-width:320px">Page not found</h1><p style="margin-bottom:48px">Sorry<!-- --> <span role="img" aria-label="Pensive emoji">😔</span> <!-- -->we couldn’t find what you were looking for.<br/><br/><a href="/cl-react-graph/">Go home</a>.</p></main></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/404.html";window.___webpackCompilationHash="8074786eeaed5192759d";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-3a5c885b38de3686a087.js"],"app":["/app-31d1edab19a40b2bf9b4.js"],"component---src-pages-404-tsx":["/component---src-pages-404-tsx-3ecdc8908907038743e5.js"],"component---src-pages-area-fill-tsx":["/component---src-pages-area-fill-tsx-383f5b3a3834c47bbf86.js"],"component---src-pages-axis-tsx":["/component---src-pages-axis-tsx-185cb574d1e4c818e9f4.js"],"component---src-pages-bar-chart-tsx":["/component---src-pages-bar-chart-tsx-77d4baf534f9ceb5d028.js"],"component---src-pages-bars-tsx":["/component---src-pages-bars-tsx-e38506d3d162e9fbc82f.js"],"component---src-pages-brush-tsx":["/component---src-pages-brush-tsx-ff4445138245243b2796.js"],"component---src-pages-chord-tsx":["/component---src-pages-chord-tsx-56e22290f4941c066ee0.js"],"component---src-pages-getting-started-tsx":["/component---src-pages-getting-started-tsx-142e263abcf310b43c84.js"],"component---src-pages-grid-tsx":["/component---src-pages-grid-tsx-64e86b612a846fba2ead.js"],"component---src-pages-histogram-tsx":["/component---src-pages-histogram-tsx-0e87c863ae94103ac5ba.js"],"component---src-pages-index-tsx":["/component---src-pages-index-tsx-e454ef042d6e35ddc020.js"],"component---src-pages-joyplot-tsx":["/component---src-pages-joyplot-tsx-78630229415922bd3812.js"],"component---src-pages-label-tsx":["/component---src-pages-label-tsx-171c6231d66899241edd.js"],"component---src-pages-line-tsx":["/component---src-pages-line-tsx-b690436c85c0c25824a8.js"],"component---src-pages-map-tsx":["/component---src-pages-map-tsx-78aa818928578ced709c.js"],"component---src-pages-path-tsx":["/component---src-pages-path-tsx-971a5508c0c165b19448.js"],"component---src-pages-pie-tsx":["/component---src-pages-pie-tsx-a6c5bd2f8e5be90f97ca.js"],"component---src-pages-point-tsx":["/component---src-pages-point-tsx-e97bfcef451a2f0e42af.js"],"component---src-pages-radar-tsx":["/component---src-pages-radar-tsx-b84ff762db3680d1cf50.js"],"component---src-pages-scatter-tsx":["/component---src-pages-scatter-tsx-94fd91bdf1ef6b5d7617.js"],"component---src-pages-tornado-tsx":["/component---src-pages-tornado-tsx-931b7acd75d46f345e79.js"],"component---src-pages-upset-tsx":["/component---src-pages-upset-tsx-95618691202f2a2fb825.js"]};/*]]>*/</script><script src="/cl-react-graph/polyfill-3a5c885b38de3686a087.js" nomodule=""></script><script src="/cl-react-graph/app-31d1edab19a40b2bf9b4.js" async=""></script><script src="/cl-react-graph/framework-be0f29fe10d2c8b3047b.js" async=""></script><script src="/cl-react-graph/webpack-runtime-4c75661327a6f6983319.js" async=""></script></body></html>
diff --git a/docs/404/index.html b/docs/404/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="generator" content="Gatsby 4.25.7"/><style data-styled="" data-styled-version="5.3.3"></style></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><main style="color:#232129;padding:96px;font-family:-apple-system, Roboto, sans-serif, serif"><title>Not found</title><h1 style="margin-top:0;margin-bottom:64px;max-width:320px">Page not found</h1><p style="margin-bottom:48px">Sorry<!-- --> <span role="img" aria-label="Pensive emoji">😔</span> <!-- -->we couldn’t find what you were looking for.<br/><br/><a href="/cl-react-graph/">Go home</a>.</p></main></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/404/";window.___webpackCompilationHash="9276b5d1656c0c092289";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-3a5c885b38de3686a087.js"],"app":["/app-31d1edab19a40b2bf9b4.js"],"component---src-pages-404-tsx":["/component---src-pages-404-tsx-3ecdc8908907038743e5.js"],"component---src-pages-area-fill-tsx":["/component---src-pages-area-fill-tsx-0be2660cb17e2acb5bbf.js"],"component---src-pages-axis-tsx":["/component---src-pages-axis-tsx-7fc6f6eb157f8d896d86.js"],"component---src-pages-bar-chart-tsx":["/component---src-pages-bar-chart-tsx-c09ffe52d6dc608b7c23.js"],"component---src-pages-bars-tsx":["/component---src-pages-bars-tsx-f93ca89171776f0b27b7.js"],"component---src-pages-brush-tsx":["/component---src-pages-brush-tsx-aec26b6d430e6e561555.js"],"component---src-pages-chord-tsx":["/component---src-pages-chord-tsx-cd8439cc5af90900274c.js"],"component---src-pages-getting-started-tsx":["/component---src-pages-getting-started-tsx-7633855eb625ad2cc626.js"],"component---src-pages-grid-tsx":["/component---src-pages-grid-tsx-6a9ba35d9e00e9fc010e.js"],"component---src-pages-histogram-tsx":["/component---src-pages-histogram-tsx-2cdf32585a3579f14f6a.js"],"component---src-pages-index-tsx":["/component---src-pages-index-tsx-e454ef042d6e35ddc020.js"],"component---src-pages-joyplot-tsx":["/component---src-pages-joyplot-tsx-b5e51f0cf6123ce4d693.js"],"component---src-pages-label-tsx":["/component---src-pages-label-tsx-148c1f514d5e1d900a91.js"],"component---src-pages-line-tsx":["/component---src-pages-line-tsx-1c992197870537cdaf4c.js"],"component---src-pages-map-tsx":["/component---src-pages-map-tsx-21095f38b36d1257dc90.js"],"component---src-pages-path-tsx":["/component---src-pages-path-tsx-6c54aefdcd5086b79b75.js"],"component---src-pages-pie-tsx":["/component---src-pages-pie-tsx-28e63cce400fc13dd95f.js"],"component---src-pages-point-tsx":["/component---src-pages-point-tsx-47079f3a28a4be2c7b17.js"],"component---src-pages-radar-tsx":["/component---src-pages-radar-tsx-c5273d55d6b8721a8b81.js"],"component---src-pages-scatter-tsx":["/component---src-pages-scatter-tsx-e9772446015a44ca9ea9.js"],"component---src-pages-tornado-tsx":["/component---src-pages-tornado-tsx-66f61d74549789b95f40.js"],"component---src-pages-upset-tsx":["/component---src-pages-upset-tsx-25908bacde6713ab6dac.js"]};/*]]>*/</script><script src="/cl-react-graph/polyfill-3a5c885b38de3686a087.js" nomodule=""></script><script src="/cl-react-graph/app-31d1edab19a40b2bf9b4.js" async=""></script><script src="/cl-react-graph/framework-be0f29fe10d2c8b3047b.js" async=""></script><script src="/cl-react-graph/webpack-runtime-b72e72e6dcbbc9813c76.js" async=""></script></body></html>
+<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="generator" content="Gatsby 4.25.7"/><style data-styled="" data-styled-version="5.3.3"></style></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><main style="color:#232129;padding:96px;font-family:-apple-system, Roboto, sans-serif, serif"><title>Not found</title><h1 style="margin-top:0;margin-bottom:64px;max-width:320px">Page not found</h1><p style="margin-bottom:48px">Sorry<!-- --> <span role="img" aria-label="Pensive emoji">😔</span> <!-- -->we couldn’t find what you were looking for.<br/><br/><a href="/cl-react-graph/">Go home</a>.</p></main></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/404/";window.___webpackCompilationHash="8074786eeaed5192759d";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-3a5c885b38de3686a087.js"],"app":["/app-31d1edab19a40b2bf9b4.js"],"component---src-pages-404-tsx":["/component---src-pages-404-tsx-3ecdc8908907038743e5.js"],"component---src-pages-area-fill-tsx":["/component---src-pages-area-fill-tsx-383f5b3a3834c47bbf86.js"],"component---src-pages-axis-tsx":["/component---src-pages-axis-tsx-185cb574d1e4c818e9f4.js"],"component---src-pages-bar-chart-tsx":["/component---src-pages-bar-chart-tsx-77d4baf534f9ceb5d028.js"],"component---src-pages-bars-tsx":["/component---src-pages-bars-tsx-e38506d3d162e9fbc82f.js"],"component---src-pages-brush-tsx":["/component---src-pages-brush-tsx-ff4445138245243b2796.js"],"component---src-pages-chord-tsx":["/component---src-pages-chord-tsx-56e22290f4941c066ee0.js"],"component---src-pages-getting-started-tsx":["/component---src-pages-getting-started-tsx-142e263abcf310b43c84.js"],"component---src-pages-grid-tsx":["/component---src-pages-grid-tsx-64e86b612a846fba2ead.js"],"component---src-pages-histogram-tsx":["/component---src-pages-histogram-tsx-0e87c863ae94103ac5ba.js"],"component---src-pages-index-tsx":["/component---src-pages-index-tsx-e454ef042d6e35ddc020.js"],"component---src-pages-joyplot-tsx":["/component---src-pages-joyplot-tsx-78630229415922bd3812.js"],"component---src-pages-label-tsx":["/component---src-pages-label-tsx-171c6231d66899241edd.js"],"component---src-pages-line-tsx":["/component---src-pages-line-tsx-b690436c85c0c25824a8.js"],"component---src-pages-map-tsx":["/component---src-pages-map-tsx-78aa818928578ced709c.js"],"component---src-pages-path-tsx":["/component---src-pages-path-tsx-971a5508c0c165b19448.js"],"component---src-pages-pie-tsx":["/component---src-pages-pie-tsx-a6c5bd2f8e5be90f97ca.js"],"component---src-pages-point-tsx":["/component---src-pages-point-tsx-e97bfcef451a2f0e42af.js"],"component---src-pages-radar-tsx":["/component---src-pages-radar-tsx-b84ff762db3680d1cf50.js"],"component---src-pages-scatter-tsx":["/component---src-pages-scatter-tsx-94fd91bdf1ef6b5d7617.js"],"component---src-pages-tornado-tsx":["/component---src-pages-tornado-tsx-931b7acd75d46f345e79.js"],"component---src-pages-upset-tsx":["/component---src-pages-upset-tsx-95618691202f2a2fb825.js"]};/*]]>*/</script><script src="/cl-react-graph/polyfill-3a5c885b38de3686a087.js" nomodule=""></script><script src="/cl-react-graph/app-31d1edab19a40b2bf9b4.js" async=""></script><script src="/cl-react-graph/framework-be0f29fe10d2c8b3047b.js" async=""></script><script src="/cl-react-graph/webpack-runtime-4c75661327a6f6983319.js" async=""></script></body></html>
diff --git a/docs/6b0aeb20adbfa483b593753115d87e8e11ad2a99-5baf970f120b4a931da2.js b/docs/6b0aeb20adbfa483b593753115d87e8e11ad2a99-5baf970f120b4a931da2.js
diff --git a/...d2a99-8cfbed867107113bc511.js.LICENSE.txt → ...d2a99-5baf970f120b4a931da2.js.LICENSE.txt b/...d2a99-8cfbed867107113bc511.js.LICENSE.txt → ...d2a99-5baf970f120b4a931da2.js.LICENSE.txt
diff --git a/docs/6b0aeb20adbfa483b593753115d87e8e11ad2a99-5baf970f120b4a931da2.js.map b/docs/6b0aeb20adbfa483b593753115d87e8e11ad2a99-5baf970f120b4a931da2.js.map
diff --git a/docs/6b0aeb20adbfa483b593753115d87e8e11ad2a99-8cfbed867107113bc511.js b/docs/6b0aeb20adbfa483b593753115d87e8e11ad2a99-8cfbed867107113bc511.js
diff --git a/docs/6b0aeb20adbfa483b593753115d87e8e11ad2a99-8cfbed867107113bc511.js.map b/docs/6b0aeb20adbfa483b593753115d87e8e11ad2a99-8cfbed867107113bc511.js.map