bento-charts 2.6.8 → 2.7.1

package/dist/Components/Charts/BaseBarChart.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { BaseBarChartProps } from '../../types/chartTypes';
+declare const BaseBarChart: React.FC<BaseBarChartProps>;
+export default BaseBarChart;

package/dist/Components/Charts/BaseBarChart.js

@@ -0,0 +1,62 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { Bar, BarChart, CartesianGrid, Cell, Label, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
+import { TOOLTIP_STYLE, COUNT_STYLE, LABEL_STYLE, MAX_TICK_LABEL_CHARS, TITLE_STYLE, TICKS_SHOW_ALL_LABELS_BELOW, UNITS_LABEL_OFFSET, TICK_MARGIN, COUNT_KEY, } from '../../constants/chartConstants';
+import { useChartTranslation } from '../../ChartConfigProvider';
+import NoData from '../NoData';
+import { useTransformedChartData } from '../../util/chartUtils';
+import ChartWrapper from './ChartWrapper';
+var tickFormatter = function (tickLabel) {
+    if (tickLabel.length <= MAX_TICK_LABEL_CHARS) {
+        return tickLabel;
+    }
+    return "".concat(tickLabel.substring(0, MAX_TICK_LABEL_CHARS), "...");
+};
+var BAR_CHART_MARGINS = { top: 10, bottom: 100, right: 20 };
+var BaseBarChart = function (_a) {
+    var height = _a.height, width = _a.width, units = _a.units, title = _a.title, onClick = _a.onClick, chartFill = _a.chartFill, otherFill = _a.otherFill, params = __rest(_a, ["height", "width", "units", "title", "onClick", "chartFill", "otherFill"]);
+    var t = useChartTranslation();
+    var fill = function (entry, index) {
+        return entry.x === 'missing' ? otherFill : chartFill[index % chartFill.length];
+    };
+    var data = useTransformedChartData(params, true);
+    var totalCount = data.reduce(function (sum, e) { return sum + e.y; }, 0);
+    var onHover = useCallback(function (_data, _index, e) {
+        var target = e.target;
+        if (onClick && target)
+            target.style.cursor = 'pointer';
+    }, [onClick]);
+    if (data.length === 0) {
+        return _jsx(NoData, { height: height });
+    }
+    // Regarding XAxis.ticks below:
+    //  The weird conditional is added from https://github.com/recharts/recharts/issues/2593#issuecomment-1311678397
+    //  Basically, if data is empty, Recharts will default to a domain of [0, "auto"] and our tickFormatter trips up
+    //  on formatting a non-string. This hack manually overrides the ticks for the axis and blanks it out.
+    //    - David L, 2023-01-03
+    return (_jsxs(ChartWrapper, { responsive: typeof width !== 'number', children: [_jsx("div", { style: TITLE_STYLE, children: title }), _jsx(ResponsiveContainer, { width: width !== null && width !== void 0 ? width : '100%', height: height, children: _jsxs(BarChart, { data: data, margin: BAR_CHART_MARGINS, children: [_jsx(XAxis, { dataKey: "x", height: 20, angle: -45, ticks: data.length ? undefined : [''], tickFormatter: tickFormatter, tickMargin: TICK_MARGIN, textAnchor: "end", interval: data.length < TICKS_SHOW_ALL_LABELS_BELOW ? 0 : 'preserveStartEnd', children: _jsx(Label, { value: units, offset: UNITS_LABEL_OFFSET, position: "insideBottom" }) }), _jsx(YAxis, { children: _jsx(Label, { value: t[COUNT_KEY], offset: -10, position: "left", angle: 270 }) }), _jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false }), _jsx(Tooltip, { content: _jsx(BarTooltip, { totalCount: totalCount }) }), _jsx(Bar, { dataKey: "y", isAnimationActive: false, onClick: onClick, onMouseEnter: onHover, maxBarSize: 70, children: data.map(function (entry, index) { return (_jsx(Cell, { fill: fill(entry, index) }, entry.x)); }) })] }) })] }));
+};
+var BarTooltip = function (_a) {
+    var _b, _c, _d;
+    var active = _a.active, payload = _a.payload, totalCount = _a.totalCount;
+    if (!active) {
+        return null;
+    }
+    var name = (payload && ((_c = (_b = payload[0]) === null || _b === void 0 ? void 0 : _b.payload) === null || _c === void 0 ? void 0 : _c.x)) || '';
+    var value = (payload && ((_d = payload[0]) === null || _d === void 0 ? void 0 : _d.value)) || 0;
+    var percentage = totalCount ? Math.round((value / totalCount) * 100) : 0;
+    return (_jsxs("div", { style: TOOLTIP_STYLE, children: [_jsx("p", { style: LABEL_STYLE, children: name }), _jsxs("p", { style: COUNT_STYLE, children: [value, " (", percentage, "%)"] })] }));
+};
+export default BaseBarChart;
+//# sourceMappingURL=BaseBarChart.js.map

package/dist/Components/Charts/BaseBarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseBarChart.js","sourceRoot":"","sources":["../../../src/Components/Charts/BaseBarChart.tsx"],"names":[],"mappings":"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"}

package/dist/Components/Charts/BentoBarChart.d.ts

@@ -1,3 +1,4 @@
-import type { BarChartProps } from '../../types/chartTypes';
-declare const BentoBarChart: ({ height, width, units, title, onClick, colorTheme, ...params }: BarChartProps) => import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+import { BarChartProps } from '../../types/chartTypes';
+declare const BentoBarChart: React.FC<BarChartProps>;
 export default BentoBarChart;

package/dist/Components/Charts/BentoBarChart.js

@@ -20,55 +20,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import { Bar, BarChart, CartesianGrid, Cell, Label, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
-import { TOOLTIP_STYLE, TOOLTIP_OTHER_PROPS, COUNT_STYLE, LABEL_STYLE, MAX_TICK_LABEL_CHARS, TITLE_STYLE, TICKS_SHOW_ALL_LABELS_BELOW, UNITS_LABEL_OFFSET, TICK_MARGIN, COUNT_KEY, } from '../../constants/chartConstants';
-import { useChartTheme, useChartTranslation } from '../../ChartConfigProvider';
-import NoData from '../NoData';
-import { useTransformedChartData } from '../../util/chartUtils';
-import ChartWrapper from './ChartWrapper';
-var tickFormatter = function (tickLabel) {
-    if (tickLabel.length <= MAX_TICK_LABEL_CHARS) {
-        return tickLabel;
-    }
-    return "".concat(tickLabel.substring(0, MAX_TICK_LABEL_CHARS), "...");
-};
-var BAR_CHART_MARGINS = { top: 10, bottom: 100, right: 20 };
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useChartTheme } from '../../ChartConfigProvider';
+import BaseBarChart from './BaseBarChart';
 var BentoBarChart = function (_a) {
-    var height = _a.height, width = _a.width, units = _a.units, title = _a.title, onClick = _a.onClick, _b = _a.colorTheme, colorTheme = _b === void 0 ? 'default' : _b, params = __rest(_a, ["height", "width", "units", "title", "onClick", "colorTheme"]);
-    var t = useChartTranslation();
-    var _c = useChartTheme().bar[colorTheme], chartFill = _c.fill, other = _c.other;
-    var fill = function (entry, index) {
-        return entry.x === 'missing' ? other : chartFill[index % chartFill.length];
-    };
-    var data = useTransformedChartData(params, true);
-    var totalCount = data.reduce(function (sum, e) { return sum + e.y; }, 0);
-    var onHover = useCallback(function (_data, _index, e) {
-        var target = e.target;
-        if (onClick && target)
-            target.style.cursor = 'pointer';
-    }, [onClick]);
-    if (data.length === 0) {
-        return _jsx(NoData, { height: height });
-    }
-    // Regarding XAxis.ticks below:
-    //  The weird conditional is added from https://github.com/recharts/recharts/issues/2593#issuecomment-1311678397
-    //  Basically, if data is empty, Recharts will default to a domain of [0, "auto"] and our tickFormatter trips up
-    //  on formatting a non-string. This hack manually overrides the ticks for the axis and blanks it out.
-    //    - David L, 2023-01-03
-    return (_jsxs(ChartWrapper, { responsive: typeof width !== 'number', children: [_jsx("div", { style: TITLE_STYLE, children: title }), _jsx(ResponsiveContainer, { width: width !== null && width !== void 0 ? width : '100%', height: height, children: _jsxs(BarChart, { data: data, margin: BAR_CHART_MARGINS, children: [_jsx(XAxis, { dataKey: "x", height: 20, angle: -45, ticks: data.length ? undefined : [''], tickFormatter: tickFormatter, tickMargin: TICK_MARGIN, textAnchor: "end", interval: data.length < TICKS_SHOW_ALL_LABELS_BELOW ? 0 : 'preserveStartEnd', children: _jsx(Label, { value: units, offset: UNITS_LABEL_OFFSET, position: "insideBottom" }) }), _jsx(YAxis, { children: _jsx(Label, { value: t[COUNT_KEY], offset: -10, position: "left", angle: 270 }) }), _jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false }), _jsx(Tooltip, __assign({}, TOOLTIP_OTHER_PROPS, { content: _jsx(BarTooltip, { totalCount: totalCount }) })), _jsx(Bar, { dataKey: "y", isAnimationActive: false, onClick: onClick, onMouseEnter: onHover, maxBarSize: 70, children: data.map(function (entry, index) { return (_jsx(Cell, { fill: fill(entry, index) }, entry.x)); }) })] }) })] }));
-};
-var BarTooltip = function (_a) {
-    var _b, _c, _d;
-    var active = _a.active, payload = _a.payload, totalCount = _a.totalCount;
-    if (!active) {
-        return null;
-    }
-    var name = (payload && ((_c = (_b = payload[0]) === null || _b === void 0 ? void 0 : _b.payload) === null || _c === void 0 ? void 0 : _c.x)) || '';
-    var value = (payload && ((_d = payload[0]) === null || _d === void 0 ? void 0 : _d.value)) || 0;
-    var percentage = totalCount ? Math.round((value / totalCount) * 100) : 0;
-    return (_jsxs("div", { style: TOOLTIP_STYLE, children: [_jsx("p", { style: LABEL_STYLE, children: name }), _jsxs("p", { style: COUNT_STYLE, children: [value, " (", percentage, "%)"] })] }));
+    var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'default' : _b, params = __rest(_a, ["colorTheme"]);
+    var _c = useChartTheme().bar[colorTheme], chartFill = _c.fill, otherFill = _c.other;
+    return _jsx(BaseBarChart, __assign({ chartFill: chartFill, otherFill: otherFill }, params));
 };
 export default BentoBarChart;
 //# sourceMappingURL=BentoBarChart.js.map

package/dist/Components/Charts/BentoBarChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"BentoBarChart.js","sourceRoot":"","sources":["../../../src/Components/Charts/BentoBarChart.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"BentoBarChart.js","sourceRoot":"","sources":["../../../src/Components/Charts/BentoBarChart.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,IAAM,aAAa,GAA4B,UAAC,EAAqC;IAAnC,IAAA,kBAAsB,EAAtB,UAAU,mBAAG,SAAS,KAAA,EAAK,MAAM,cAAnC,cAAqC,CAAF;IAC3E,IAAA,KAAwC,aAAa,EAAE,CAAC,GAAG,CAAC,UAAU,CAAC,EAA/D,SAAS,UAAA,EAAS,SAAS,WAAoC,CAAC;IAE9E,OAAO,KAAC,YAAY,aAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,IAAM,MAAM,EAAI,CAAC;AAClF,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/Components/Charts/BentoHistogram.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { HistogramProps } from '../../types/chartTypes';
+declare const BentoHistogram: React.FC<HistogramProps>;
+export default BentoHistogram;

package/dist/Components/Charts/BentoHistogram.js

@@ -0,0 +1,32 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useChartTheme } from '../../ChartConfigProvider';
+import BaseBarChart from './BaseBarChart';
+var BentoHistogram = function (_a) {
+    var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'default' : _b, params = __rest(_a, ["colorTheme"]);
+    var _c = useChartTheme().histogram[colorTheme], chartFill = _c.fill, otherFill = _c.other;
+    return _jsx(BaseBarChart, __assign({ chartFill: chartFill, otherFill: otherFill }, params));
+};
+export default BentoHistogram;
+//# sourceMappingURL=BentoHistogram.js.map

package/dist/Components/Charts/BentoHistogram.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BentoHistogram.js","sourceRoot":"","sources":["../../../src/Components/Charts/BentoHistogram.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,IAAM,cAAc,GAA6B,UAAC,EAAqC;IAAnC,IAAA,kBAAsB,EAAtB,UAAU,mBAAG,SAAS,KAAA,EAAK,MAAM,cAAnC,cAAqC,CAAF;IAC7E,IAAA,KAAwC,aAAa,EAAE,CAAC,SAAS,CAAC,UAAU,CAAC,EAArE,SAAS,UAAA,EAAS,SAAS,WAA0C,CAAC;IAEpF,OAAO,KAAC,YAAY,aAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,IAAM,MAAM,EAAI,CAAC;AAClF,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/constants/chartConstants.d.ts

@@ -4,6 +4,7 @@ export declare const COUNT_KEY = "Count";
 export declare const OTHER_KEY = "Other";
 export declare const defaultTranslationObject: TranslationObject;
 export declare const COLORS: HexColor[];
+export declare const NEW_CHART_COLORS: HexColor[];
 export declare const BAR_CHART_FILL = "#4575b4";
 export declare const CHART_MISSING_FILL = "#bbbbbb";
 export declare const DEFAULT_CHART_THEME: ChartTheme;

package/dist/constants/chartConstants.js

@@ -36,6 +36,7 @@ export var COLORS = [
     '#5574A6',
     '#3B3EAC',
 ];
+export var NEW_CHART_COLORS = ['#F94144', '#F3722C', '#F8961E', '#F9C74F', '#90BE6D', '#2D9CDB'];
 export var BAR_CHART_FILL = '#4575b4';
 export var CHART_MISSING_FILL = '#bbbbbb';
 export var DEFAULT_CHART_THEME = {
@@ -44,12 +45,26 @@ export var DEFAULT_CHART_THEME = {
             fill: COLORS,
             other: CHART_MISSING_FILL,
         },
+        new: {
+            fill: NEW_CHART_COLORS,
+            other: CHART_MISSING_FILL,
+        },
     },
     bar: {
         default: {
             fill: [BAR_CHART_FILL],
             other: CHART_MISSING_FILL,
         },
+        new: {
+            fill: NEW_CHART_COLORS,
+            other: CHART_MISSING_FILL,
+        },
+    },
+    histogram: {
+        default: {
+            fill: [BAR_CHART_FILL],
+            other: CHART_MISSING_FILL,
+        },
     },
 };
 // ################### CHART STYLES ###################

package/dist/constants/chartConstants.js.map

@@ -1 +1 @@
-{"version":3,"file":"chartConstants.js","sourceRoot":"","sources":["../../src/constants/chartConstants.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"chartConstants.js","sourceRoot":"","sources":["../../src/constants/chartConstants.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { default as BarChart } from './Components/Charts/BentoBarChart';
+export { default as Histogram } from './Components/Charts/BentoHistogram';
 export { default as PieChart } from './Components/Charts/BentoPie';
 export { default as ChartConfigProvider } from './ChartConfigProvider';
 export * from './types/chartTypes';

package/dist/index.js

@@ -2,6 +2,7 @@
 // noinspection JSUnusedGlobalSymbols
 // Categorical charts
 export { default as BarChart } from './Components/Charts/BentoBarChart';
+export { default as Histogram } from './Components/Charts/BentoHistogram';
 export { default as PieChart } from './Components/Charts/BentoPie';
 // Maps are not included in index.ts - instead, they need to be included from `bento-charts/maps`.
 // This way, we can have optional peer dependencies.

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,2CAA2C;AAC3C,qCAAqC;AAErC,qBAAqB;AACrB,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAEnE,kGAAkG;AAClG,oDAAoD;AAEpD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,2CAA2C;AAC3C,qCAAqC;AAErC,qBAAqB;AACrB,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAEnE,kGAAkG;AAClG,oDAAoD;AAEpD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,cAAc,oBAAoB,CAAC"}

package/dist/types/chartTypes.d.ts

@@ -26,6 +26,7 @@ export type ChartTypeContext = {
 export type ChartTheme = {
     pie: ChartTypeContext;
     bar: ChartTypeContext;
+    histogram: ChartTypeContext;
 };
 export type FilterCallback<T> = (value: T, index: number, array: T[]) => boolean;
 export type UnitaryMapCallback<T> = (value: T, index: number, array: T[]) => T;
@@ -59,10 +60,17 @@ export interface PieChartProps extends BaseCategoricalChartProps {
     chartThreshold?: number;
     maxLabelChars?: number;
 }
-export interface BarChartProps extends BaseCategoricalChartProps {
-    colorTheme?: keyof ChartTheme['bar'];
+export interface BaseBarChartProps extends BaseCategoricalChartProps {
+    chartFill: HexColor[];
+    otherFill: HexColor;
     title?: string;
     units: string;
     onClick?: BarProps['onClick'];
 }
+export interface BarChartProps extends Omit<BaseBarChartProps, 'chartFill' | 'otherFill'> {
+    colorTheme?: keyof ChartTheme['bar'];
+}
+export interface HistogramProps extends Omit<BaseBarChartProps, 'chartFill' | 'otherFill'> {
+    colorTheme?: keyof ChartTheme['bar'];
+}
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bento-charts",
-  "version": "2.6.8",
+  "version": "2.7.1",
   "description": "Charts library for Bento-platform",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/Components/Charts/BaseBarChart.tsx

@@ -0,0 +1,137 @@
+import React, { useCallback } from 'react';
+import {
+  Bar,
+  BarChart,
+  BarProps,
+  CartesianGrid,
+  Cell,
+  Label,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import {
+  TOOLTIP_STYLE,
+  COUNT_STYLE,
+  LABEL_STYLE,
+  MAX_TICK_LABEL_CHARS,
+  TITLE_STYLE,
+  TICKS_SHOW_ALL_LABELS_BELOW,
+  UNITS_LABEL_OFFSET,
+  TICK_MARGIN,
+  COUNT_KEY,
+} from '../../constants/chartConstants';
+
+import type { BaseBarChartProps, CategoricalChartDataItem, TooltipPayload } from '../../types/chartTypes';
+import { useChartTranslation } from '../../ChartConfigProvider';
+import NoData from '../NoData';
+import { useTransformedChartData } from '../../util/chartUtils';
+import ChartWrapper from './ChartWrapper';
+
+const tickFormatter = (tickLabel: string) => {
+  if (tickLabel.length <= MAX_TICK_LABEL_CHARS) {
+    return tickLabel;
+  }
+  return `${tickLabel.substring(0, MAX_TICK_LABEL_CHARS)}...`;
+};
+
+const BAR_CHART_MARGINS = { top: 10, bottom: 100, right: 20 };
+
+const BaseBarChart: React.FC<BaseBarChartProps> = ({
+  height,
+  width,
+  units,
+  title,
+  onClick,
+  chartFill,
+  otherFill,
+  ...params
+}) => {
+  const t = useChartTranslation();
+
+  const fill = (entry: CategoricalChartDataItem, index: number) =>
+    entry.x === 'missing' ? otherFill : chartFill[index % chartFill.length];
+
+  const data = useTransformedChartData(params, true);
+
+  const totalCount = data.reduce((sum, e) => sum + e.y, 0);
+
+  const onHover: BarProps['onMouseEnter'] = useCallback(
+    (_data, _index, e) => {
+      const { target } = e;
+      if (onClick && target) (target as SVGElement).style.cursor = 'pointer';
+    },
+    [onClick]
+  );
+
+  if (data.length === 0) {
+    return <NoData height={height} />;
+  }
+
+  // Regarding XAxis.ticks below:
+  //  The weird conditional is added from https://github.com/recharts/recharts/issues/2593#issuecomment-1311678397
+  //  Basically, if data is empty, Recharts will default to a domain of [0, "auto"] and our tickFormatter trips up
+  //  on formatting a non-string. This hack manually overrides the ticks for the axis and blanks it out.
+  //    - David L, 2023-01-03
+  return (
+    <ChartWrapper responsive={typeof width !== 'number'}>
+      <div style={TITLE_STYLE}>{title}</div>
+      <ResponsiveContainer width={width ?? '100%'} height={height}>
+        <BarChart data={data} margin={BAR_CHART_MARGINS}>
+          <XAxis
+            dataKey="x"
+            height={20}
+            angle={-45}
+            ticks={data.length ? undefined : ['']}
+            tickFormatter={tickFormatter}
+            tickMargin={TICK_MARGIN}
+            textAnchor="end"
+            interval={data.length < TICKS_SHOW_ALL_LABELS_BELOW ? 0 : 'preserveStartEnd'}
+          >
+            <Label value={units} offset={UNITS_LABEL_OFFSET} position="insideBottom" />
+          </XAxis>
+          <YAxis>
+            <Label value={t[COUNT_KEY]} offset={-10} position="left" angle={270} />
+          </YAxis>
+          <CartesianGrid strokeDasharray="3 3" vertical={false} />
+          <Tooltip content={<BarTooltip totalCount={totalCount} />} />
+          <Bar dataKey="y" isAnimationActive={false} onClick={onClick} onMouseEnter={onHover} maxBarSize={70}>
+            {data.map((entry, index) => (
+              <Cell key={entry.x} fill={fill(entry, index)} />
+            ))}
+          </Bar>
+        </BarChart>
+      </ResponsiveContainer>
+    </ChartWrapper>
+  );
+};
+
+const BarTooltip = ({
+  active,
+  payload,
+  totalCount,
+}: {
+  active?: boolean;
+  payload?: TooltipPayload;
+  totalCount: number;
+}) => {
+  if (!active) {
+    return null;
+  }
+
+  const name = (payload && payload[0]?.payload?.x) || '';
+  const value = (payload && payload[0]?.value) || 0;
+  const percentage = totalCount ? Math.round((value / totalCount) * 100) : 0;
+
+  return (
+    <div style={TOOLTIP_STYLE}>
+      <p style={LABEL_STYLE}>{name}</p>
+      <p style={COUNT_STYLE}>
+        {value} ({percentage}%)
+      </p>
+    </div>
+  );
+};
+
+export default BaseBarChart;

package/src/Components/Charts/BentoBarChart.tsx

@@ -1,129 +1,13 @@
-import React, { useCallback } from 'react';
-import {
-  Bar,
-  BarChart,
-  BarProps,
-  CartesianGrid,
-  Cell,
-  Label,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from 'recharts';
-import type { TooltipProps } from 'recharts';
+import React from 'react';
+import { BarChartProps } from '../../types/chartTypes';
 
-import {
-  TOOLTIP_STYLE,
-  TOOLTIP_OTHER_PROPS,
-  COUNT_STYLE,
-  LABEL_STYLE,
-  MAX_TICK_LABEL_CHARS,
-  TITLE_STYLE,
-  TICKS_SHOW_ALL_LABELS_BELOW,
-  UNITS_LABEL_OFFSET,
-  TICK_MARGIN,
-  COUNT_KEY,
-} from '../../constants/chartConstants';
+import { useChartTheme } from '../../ChartConfigProvider';
+import BaseBarChart from './BaseBarChart';
 
-import type { BarChartProps, CategoricalChartDataItem, TooltipPayload } from '../../types/chartTypes';
-import { useChartTheme, useChartTranslation } from '../../ChartConfigProvider';
-import NoData from '../NoData';
-import { useTransformedChartData } from '../../util/chartUtils';
-import ChartWrapper from './ChartWrapper';
+const BentoBarChart: React.FC<BarChartProps> = ({ colorTheme = 'default', ...params }) => {
+  const { fill: chartFill, other: otherFill } = useChartTheme().bar[colorTheme];
 
-const tickFormatter = (tickLabel: string) => {
-  if (tickLabel.length <= MAX_TICK_LABEL_CHARS) {
-    return tickLabel;
-  }
-  return `${tickLabel.substring(0, MAX_TICK_LABEL_CHARS)}...`;
-};
-
-const BAR_CHART_MARGINS = { top: 10, bottom: 100, right: 20 };
-
-const BentoBarChart = ({ height, width, units, title, onClick, colorTheme = 'default', ...params }: BarChartProps) => {
-  const t = useChartTranslation();
-  const { fill: chartFill, other } = useChartTheme().bar[colorTheme];
-
-  const fill = (entry: CategoricalChartDataItem, index: number) =>
-    entry.x === 'missing' ? other : chartFill[index % chartFill.length];
-
-  const data = useTransformedChartData(params, true);
-
-  const totalCount = data.reduce((sum, e) => sum + e.y, 0);
-
-  const onHover: BarProps['onMouseEnter'] = useCallback(
-    (_data, _index, e) => {
-      const { target } = e;
-      if (onClick && target) (target as SVGElement).style.cursor = 'pointer';
-    },
-    [onClick]
-  );
-
-  if (data.length === 0) {
-    return <NoData height={height} />;
-  }
-
-  // Regarding XAxis.ticks below:
-  //  The weird conditional is added from https://github.com/recharts/recharts/issues/2593#issuecomment-1311678397
-  //  Basically, if data is empty, Recharts will default to a domain of [0, "auto"] and our tickFormatter trips up
-  //  on formatting a non-string. This hack manually overrides the ticks for the axis and blanks it out.
-  //    - David L, 2023-01-03
-  return (
-    <ChartWrapper responsive={typeof width !== 'number'}>
-      <div style={TITLE_STYLE}>{title}</div>
-      <ResponsiveContainer width={width ?? '100%'} height={height}>
-        <BarChart data={data} margin={BAR_CHART_MARGINS}>
-          <XAxis
-            dataKey="x"
-            height={20}
-            angle={-45}
-            ticks={data.length ? undefined : ['']}
-            tickFormatter={tickFormatter}
-            tickMargin={TICK_MARGIN}
-            textAnchor="end"
-            interval={data.length < TICKS_SHOW_ALL_LABELS_BELOW ? 0 : 'preserveStartEnd'}
-          >
-            <Label value={units} offset={UNITS_LABEL_OFFSET} position="insideBottom" />
-          </XAxis>
-          <YAxis>
-            <Label value={t[COUNT_KEY]} offset={-10} position="left" angle={270} />
-          </YAxis>
-          <CartesianGrid strokeDasharray="3 3" vertical={false} />
-          <Tooltip {...TOOLTIP_OTHER_PROPS} content={<BarTooltip totalCount={totalCount} />} />
-          <Bar dataKey="y" isAnimationActive={false} onClick={onClick} onMouseEnter={onHover} maxBarSize={70}>
-            {data.map((entry, index) => (
-              <Cell key={entry.x} fill={fill(entry, index)} />
-            ))}
-          </Bar>
-        </BarChart>
-      </ResponsiveContainer>
-    </ChartWrapper>
-  );
-};
-
-interface BarTooltipProps extends TooltipProps<number, string> {
-  payload?: TooltipPayload;
-  totalCount: number;
-}
-
-const BarTooltip = ({ active, payload, totalCount }: BarTooltipProps) => {
-  if (!active) {
-    return null;
-  }
-
-  const name = (payload && payload[0]?.payload?.x) || '';
-  const value = (payload && payload[0]?.value) || 0;
-  const percentage = totalCount ? Math.round((value / totalCount) * 100) : 0;
-
-  return (
-    <div style={TOOLTIP_STYLE}>
-      <p style={LABEL_STYLE}>{name}</p>
-      <p style={COUNT_STYLE}>
-        {value} ({percentage}%)
-      </p>
-    </div>
-  );
+  return <BaseBarChart chartFill={chartFill} otherFill={otherFill} {...params} />;
 };
 
 export default BentoBarChart;

package/src/Components/Charts/BentoHistogram.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { HistogramProps } from '../../types/chartTypes';
+
+import { useChartTheme } from '../../ChartConfigProvider';
+import BaseBarChart from './BaseBarChart';
+
+const BentoHistogram: React.FC<HistogramProps> = ({ colorTheme = 'default', ...params }) => {
+  const { fill: chartFill, other: otherFill } = useChartTheme().histogram[colorTheme];
+
+  return <BaseBarChart chartFill={chartFill} otherFill={otherFill} {...params} />;
+};
+
+export default BentoHistogram;

package/src/constants/chartConstants.ts

@@ -42,6 +42,8 @@ export const COLORS: HexColor[] = [
   '#3B3EAC',
 ];
 
+export const NEW_CHART_COLORS: HexColor[] = ['#F94144', '#F3722C', '#F8961E', '#F9C74F', '#90BE6D', '#2D9CDB'];
+
 export const BAR_CHART_FILL = '#4575b4';
 export const CHART_MISSING_FILL = '#bbbbbb';
 
@@ -51,12 +53,26 @@ export const DEFAULT_CHART_THEME: ChartTheme = {
       fill: COLORS,
       other: CHART_MISSING_FILL,
     },
+    new: {
+      fill: NEW_CHART_COLORS,
+      other: CHART_MISSING_FILL,
+    },
   },
   bar: {
     default: {
       fill: [BAR_CHART_FILL],
       other: CHART_MISSING_FILL,
     },
+    new: {
+      fill: NEW_CHART_COLORS,
+      other: CHART_MISSING_FILL,
+    },
+  },
+  histogram: {
+    default: {
+      fill: [BAR_CHART_FILL],
+      other: CHART_MISSING_FILL,
+    },
   },
 };
 

package/src/index.ts

@@ -3,6 +3,7 @@
 
 // Categorical charts
 export { default as BarChart } from './Components/Charts/BentoBarChart';
+export { default as Histogram } from './Components/Charts/BentoHistogram';
 export { default as PieChart } from './Components/Charts/BentoPie';
 
 // Maps are not included in index.ts - instead, they need to be included from `bento-charts/maps`.

package/src/types/chartTypes.ts

@@ -28,7 +28,8 @@ export type ChartTypeContext = {
   };
 export type ChartTheme = {
   pie: ChartTypeContext,
-  bar: ChartTypeContext
+  bar: ChartTypeContext,
+  histogram: ChartTypeContext
 };
 
 export type FilterCallback<T> = (value: T, index: number, array: T[]) => boolean;
@@ -76,9 +77,18 @@ export interface PieChartProps extends BaseCategoricalChartProps {
   maxLabelChars?: number;
 }
 
-export interface BarChartProps extends BaseCategoricalChartProps {
-  colorTheme?: keyof ChartTheme['bar'];
+export interface BaseBarChartProps extends BaseCategoricalChartProps {
+  chartFill: HexColor[];
+  otherFill: HexColor;
   title?: string;
   units: string;
   onClick?: BarProps['onClick'];
 }
+
+export interface BarChartProps extends Omit<BaseBarChartProps, 'chartFill' | 'otherFill'> {
+  colorTheme?: keyof ChartTheme['bar'];
+}
+export interface HistogramProps extends Omit<BaseBarChartProps, 'chartFill' | 'otherFill'> {
+  colorTheme?: keyof ChartTheme['bar'];
+}
+