bento-charts 1.0.0

package/.git-ignore

@@ -0,0 +1,6 @@
+build/*
+node_modules/*
+dist/*
+.DS_Store
+.idea/
+.vscode/

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Bento Platform
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,9 @@
+
+
+// TODO: Add comments telling how can you translate
+// TODO: Add a way for default translation
+// TODO: Add theme selection for chart
+// TODO: Add comment on how to remove missing
+
+There are two charts supported: Bar and Pie
+Refer 

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "bento-charts",
+  "version": "1.0.0",
+  "description": "Charts library for Bento-platform",
+  "main": "./src/index.js",
+  "scripts": {
+    "build": "webpack --mode=production",
+    "watch": "webpack --mode=development --watch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bento-platform/Bento-Charts.git"
+  },
+  "keywords": [
+    "Bento",
+    "Charts"
+  ],
+  "author": "Sanjeev Lakhwani",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/bento-platform/Bento-Charts/issues"
+  },
+  "homepage": "https://github.com/bento-platform/Bento-Charts#readme",
+  "dependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.10",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "recharts": "^2.4.3",
+    "ts-loader": "^9.4.2"
+  },
+  "devDependencies": {
+    "prettier": "2.7.1",
+    "typescript": "^4.9.5",
+    "webpack": "^5.76.0",
+    "webpack-cli": "^4.9.2"
+  }
+}

package/src/ChartConfigProvider.tsx

@@ -0,0 +1,38 @@
+import React, { useContext } from 'react';
+
+import { DEFAULT_CHART_THEME, defaultTranslationObject } from './constants/chartConstants';
+import { ChartTheme, LngDictionary, SupportedLng, TranslationObject } from './types/chartTypes';
+
+const ChartThemeContext = React.createContext<ChartTheme>(DEFAULT_CHART_THEME);
+export const useChartTheme = () => useContext(ChartThemeContext);
+
+const ChartTranslationContext = React.createContext<LngDictionary>(defaultTranslationObject.en);
+export const useChartTranslation = () => useContext(ChartTranslationContext);
+
+const ChartConfigProvider = ({
+  theme = useChartTheme(),
+  Lng,
+  translationMap,
+  children,
+}: {
+  theme?: ChartTheme;
+  Lng: string;
+  translationMap?: TranslationObject;
+  children: React.ReactElement;
+}) => {
+  let lang: SupportedLng = 'en';
+  try {
+    lang = Lng as SupportedLng;
+  } catch (e) {
+    console.error('Lng is not a supported language');
+  }
+  return (
+    <ChartThemeContext.Provider value={theme}>
+      <ChartTranslationContext.Provider value={translationMap ? translationMap[lang] : defaultTranslationObject[lang]}>
+        {children}
+      </ChartTranslationContext.Provider>
+    </ChartThemeContext.Provider>
+  );
+};
+
+export default ChartConfigProvider;

package/src/Charts/BentoBarChart.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { BarChart, Bar, Cell, XAxis, YAxis, Tooltip, Label } from 'recharts';
+import {
+  TOOL_TIP_STYLE,
+  COUNT_STYLE,
+  LABEL_STYLE,
+  CHART_WRAPPER_STYLE,
+  MAX_TICK_LABEL_CHARS,
+  TITLE_STYLE,
+  ASPECT_RATIO,
+  TICKS_SHOW_ALL_LABELS_BELOW,
+  UNITS_LABEL_OFFSET,
+  TICK_MARGIN,
+} from '../constants/chartConstants';
+
+import type { BarChartProps, ChartDataItem, TooltipPayload } from '../types/chartTypes';
+import { useChartTheme, useChartTranslation } from '../ChartConfigProvider';
+
+const tickFormatter = (tickLabel: string) => {
+  if (tickLabel.length <= MAX_TICK_LABEL_CHARS) {
+    return tickLabel;
+  }
+  return `${tickLabel.substring(0, MAX_TICK_LABEL_CHARS)}...`;
+};
+
+const BentoBarChart = ({
+  data,
+  height,
+  units,
+  title,
+  preFilter,
+  dataMap,
+  postFilter,
+  removeEmpty = true,
+  colorTheme = 'default',
+}: BarChartProps) => {
+  const t = useChartTranslation();
+  const { fill: chartFill, missing } = useChartTheme().bar[colorTheme];
+
+  const fill = (entry: ChartDataItem) => (entry.x === 'missing' ? missing : chartFill);
+
+  data = [...data];
+  if (preFilter) data = data.filter(preFilter);
+  if (dataMap) data = data.map(dataMap);
+  if (postFilter) data = data.filter(postFilter);
+
+  if (removeEmpty) data = data.filter((d) => d.y !== 0);
+
+  const totalCount = data.reduce((sum, e) => sum + e.y, 0);
+
+  // 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 (
+    <div style={CHART_WRAPPER_STYLE}>
+      <div style={TITLE_STYLE}>{title}</div>
+      <BarChart width={height * ASPECT_RATIO} height={height} data={data} margin={{ top: 10, bottom: 100, right: 20 }}>
+        <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']} offset={-10} position="left" angle={270} />
+        </YAxis>
+        <Tooltip content={<BarTooltip totalCount={totalCount} />} />
+        <Bar dataKey="y" isAnimationActive={false}>
+          {data.map((entry) => (
+            <Cell key={entry.x} fill={fill(entry)} />
+          ))}
+        </Bar>
+      </BarChart>
+    </div>
+  );
+};
+
+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={TOOL_TIP_STYLE}>
+      <p style={LABEL_STYLE}>{name}</p>
+      <p style={COUNT_STYLE}>
+        {value} ({percentage}%)
+      </p>
+    </div>
+  );
+};
+
+export default BentoBarChart;

package/src/Charts/BentoPie.tsx

@@ -0,0 +1,232 @@
+import React, { useState } from 'react';
+import { PieChart, Pie, Cell, Curve, Tooltip, Sector } from 'recharts';
+import { Props } from 'recharts/types/polar/Pie';
+type PieProps = Props;
+import type CSS from 'csstype';
+
+import {
+  TOOL_TIP_STYLE,
+  LABEL_STYLE,
+  COUNT_STYLE,
+  OTHER_THRESHOLD,
+  CHART_MISSING_FILL,
+  CHART_WRAPPER_STYLE,
+  RADIAN,
+  MAX_LABEL_CHARS,
+  CHART_ASPECT_RATIO,
+  LABEL_THRESHOLD,
+  COUNT_TEXT_STYLE,
+  TEXT_STYLE,
+} from '../constants/chartConstants';
+import type { PieChartProps, TooltipPayload } from '../types/chartTypes';
+import { useChartTheme, useChartTranslation } from '../ChartConfigProvider';
+import { polarToCartesian } from '../util/chartUtils';
+
+const labelShortName = (name: string) => {
+  if (name.length <= MAX_LABEL_CHARS) {
+    return name;
+  }
+  // removing 3 character cause ... s add three characters
+  return `${name.substring(0, MAX_LABEL_CHARS - 3)}\u2026`;
+};
+
+const BentoPie = ({
+  data,
+  height,
+  preFilter,
+  dataMap,
+  postFilter,
+  sort = true,
+  removeEmpty = true,
+  colorTheme = 'default',
+}: PieChartProps) => {
+  const t = useChartTranslation();
+  const theme = useChartTheme().pie[colorTheme];
+
+  const [activeIndex, setActiveIndex] = useState<number | undefined>(undefined);
+
+  // ##################### Data processing #####################
+
+  data = [...data]; // Changing immutable data to mutable data
+  if (preFilter) data = data.filter(preFilter);
+  if (dataMap) data = data.map(dataMap);
+  if (postFilter) data = data.filter(postFilter);
+
+  // removing empty values
+  if (removeEmpty) data = data.filter((e) => e.y !== 0);
+
+  if (sort) data.sort((a, b) => a.y - b.y);
+
+  // combining sections with less than OTHER_THRESHOLD
+  const sum = data.reduce((acc, e) => acc + e.y, 0);
+  const length = data.length;
+  const threshold = OTHER_THRESHOLD * sum;
+  const temp = data.filter((e) => e.y > threshold);
+  // length - 1 intentional: if there is just one category bellow threshold the "Other" category is not necessary
+  data = temp.length === length - 1 ? data : temp;
+  if (data.length !== length) {
+    data.push({ x: t['Other'], y: sum - data.reduce((acc, e) => acc + e.y, 0) });
+  }
+
+  const bentoFormatData = data.map((e) => ({ name: e.x, value: e.y }));
+
+  // ##################### Rendering #####################
+  const onEnter: PieProps['onMouseEnter'] = (_data, index) => {
+    setActiveIndex(index);
+  };
+
+  const onHover: PieProps['onMouseOver'] = (_data, _index, e) => {
+    const { target } = e;
+    if (target) (target as SVGElement).style.cursor = 'pointer';
+  };
+
+  const onLeave: PieProps['onMouseLeave'] = () => {
+    setActiveIndex(undefined);
+  };
+
+  return (
+    <div style={CHART_WRAPPER_STYLE}>
+      <PieChart height={height} width={height * CHART_ASPECT_RATIO}>
+        <Pie
+          data={bentoFormatData}
+          dataKey="value"
+          cx="50%"
+          cy="50%"
+          innerRadius={35}
+          outerRadius={80}
+          label={RenderLabel}
+          labelLine={false}
+          isAnimationActive={false}
+          onMouseEnter={onEnter}
+          onMouseLeave={onLeave}
+          onMouseOver={onHover}
+          activeIndex={activeIndex}
+          activeShape={RenderActiveLabel}
+        >
+          {data.map((entry, index) => {
+            let fill = theme[index % theme.length];
+            fill = entry.x.toLowerCase() === 'missing' ? CHART_MISSING_FILL : fill;
+            return <Cell key={index} fill={fill} />;
+          })}
+        </Pie>
+        <Tooltip
+          content={<CustomTooltip totalCount={sum} />}
+          isAnimationActive={false}
+          allowEscapeViewBox={{ x: true, y: true }}
+        />
+      </PieChart>
+    </div>
+  );
+};
+
+const RenderLabel: PieProps['label'] = (params) => {
+  const { cx, cy, midAngle, outerRadius, fill, payload, index, activeIndex } = params;
+
+  // skip rendering this static label if the sector is selected.
+  // this will let the 'renderActiveState' draw without overlapping.
+  // also, skip rendering if segment is too small a percentage (avoids label clutter)
+  if (index === activeIndex || params.percent < LABEL_THRESHOLD) {
+    return;
+  }
+
+  const name = payload.name === 'null' ? '(Empty)' : payload.name;
+
+  const sin = Math.sin(-RADIAN * midAngle);
+  const cos = Math.cos(-RADIAN * midAngle);
+  const sx = cx + (outerRadius + 10) * cos;
+  const sy = cy + (outerRadius + 10) * sin;
+  const mx = cx + (outerRadius + 20) * cos;
+  const my = cy + (outerRadius + 20) * sin;
+  const ex = mx + (cos >= 0 ? 1 : -1) * 22;
+  const ey = my;
+  const textAnchor = cos >= 0 ? 'start' : 'end';
+
+  const currentTextStyle: CSS.Properties = {
+    ...TEXT_STYLE,
+    fontWeight: payload.selected ? 'bold' : 'normal',
+    fontStyle: payload.name === 'null' ? 'italic' : 'normal',
+  };
+
+  const offsetRadius = 20;
+  const startPoint = polarToCartesian(params.cx, params.cy, params.outerRadius, midAngle);
+  const endPoint = polarToCartesian(params.cx, params.cy, params.outerRadius + offsetRadius, midAngle);
+  const lineProps = {
+    ...params,
+    fill: 'none',
+    stroke: fill,
+    points: [startPoint, endPoint],
+  };
+
+  return (
+    <g>
+      <Curve {...lineProps} type="linear" className="recharts-pie-label-line" />
+      <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none" />
+      <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
+      <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey + 3} textAnchor={textAnchor} style={currentTextStyle}>
+        {labelShortName(name)}
+      </text>
+      <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} dy={14} textAnchor={textAnchor} style={COUNT_TEXT_STYLE}>
+        {`(${payload.value})`}
+      </text>
+    </g>
+  );
+};
+
+const RenderActiveLabel: PieProps['activeShape'] = (params) => {
+  const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill } = params;
+
+  // render arc around active segment
+  return (
+    <g>
+      <Sector
+        cx={cx}
+        cy={cy}
+        startAngle={startAngle}
+        endAngle={endAngle}
+        innerRadius={innerRadius}
+        outerRadius={outerRadius}
+        fill={fill}
+      />
+      <Sector
+        cx={cx}
+        cy={cy}
+        startAngle={startAngle}
+        endAngle={endAngle}
+        innerRadius={outerRadius + 6}
+        outerRadius={outerRadius + 10}
+        fill={fill}
+      />
+    </g>
+  );
+};
+
+const CustomTooltip = ({
+  active,
+  payload,
+  totalCount,
+}: {
+  active?: boolean;
+  payload?: TooltipPayload;
+  totalCount: number;
+}) => {
+  if (!active) {
+    return null;
+  }
+
+  const name = payload ? payload[0].name : '';
+  const value = payload ? payload[0].value : 0;
+  const percentage = totalCount ? Math.round((value / totalCount) * 100) : 0;
+
+  return (
+    <div style={TOOL_TIP_STYLE}>
+      <p style={LABEL_STYLE}>{name}</p>
+      <p style={COUNT_STYLE}>
+        {' '}
+        {value} ({percentage}
+        %)
+      </p>
+    </div>
+  );
+};
+
+export default BentoPie;

package/src/constants/chartConstants.ts

@@ -0,0 +1,120 @@
+import type CSS from 'csstype';
+import { ChartTheme, HexColor, TranslationObject } from '../types/chartTypes';
+
+// ################### PACKAGE CONSTANTS ###################
+export const defaultTranslationObject: TranslationObject = {
+  en: {
+    Count: 'Count',
+    Other: 'Other',
+  },
+  fr: {
+    Count: 'Comptage',
+    Other: 'Autre',
+  },
+};
+
+// ################### THEME CONSTANTS ###################
+// Bento-web colours
+export const COLORS: HexColor[] = [
+  '#3366CC',
+  '#DC3912',
+  '#FF9900',
+  '#109618',
+  '#990099',
+  '#3B3EAC',
+  '#0099C6',
+  '#DD4477',
+  '#66AA00',
+  '#B82E2E',
+  '#316395',
+  '#994499',
+  '#22AA99',
+  '#AAAA11',
+  '#6633CC',
+  '#E67300',
+  '#8B0707',
+  '#329262',
+  '#5574A6',
+  '#3B3EAC',
+];
+
+export const BAR_CHART_FILL = '#4575b4';
+export const CHART_MISSING_FILL = '#bbbbbb';
+
+export const DEFAULT_CHART_THEME: ChartTheme = {
+  pie: {
+    default: COLORS,
+  },
+  bar: {
+    default: {
+      fill: BAR_CHART_FILL,
+      missing: CHART_MISSING_FILL,
+    },
+  },
+};
+
+// ################### CHART STYLES ###################
+
+// common
+export const TOOL_TIP_STYLE: CSS.Properties = {
+  backgroundColor: 'rgba(255, 255, 255, 0.9)',
+  padding: '5px',
+  border: '1px solid grey',
+  boxShadow: '0px 0px 2px rgba(0, 0, 0, 0.9)',
+  borderRadius: '2px',
+  textAlign: 'left',
+};
+
+export const LABEL_STYLE: CSS.Properties = {
+  fontWeight: 'bold',
+  fontSize: '12px',
+  padding: '0',
+  margin: '0',
+};
+
+export const COUNT_STYLE: CSS.Properties = {
+  fontWeight: 'normal',
+  fontSize: '11px',
+  padding: '0',
+  margin: '0',
+};
+
+export const CHART_WRAPPER_STYLE: CSS.Properties = {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+};
+
+// bar chart
+export const TITLE_STYLE: CSS.Properties = {
+  fontStyle: 'italic',
+  fontSize: '1.5em',
+  textAlign: 'center',
+};
+
+// pie chart
+export const TEXT_STYLE: CSS.Properties = {
+  fontSize: '11px',
+  fill: '#333',
+};
+export const COUNT_TEXT_STYLE: CSS.Properties = {
+  fontSize: '10px',
+  fill: '#999',
+};
+
+// ################### CHART CONSTANTS ###################
+// bar chart
+export const ASPECT_RATIO = 1.2;
+export const MAX_TICK_LABEL_CHARS = 15;
+export const UNITS_LABEL_OFFSET = -75;
+export const TICKS_SHOW_ALL_LABELS_BELOW = 11; // Below this # of X-axis ticks, force-show all labels
+export const TICK_MARGIN = 5; // vertical spacing between tick line and tick label
+
+// pie chart
+export const CHART_ASPECT_RATIO = 1.4;
+export const LABEL_THRESHOLD = 0.05;
+export const MAX_LABEL_CHARS = 14;
+export const OTHER_THRESHOLD = 0.01;
+
+// ################### UTIL CONSTANTS ###################
+export const RADIAN = Math.PI / 180;

package/src/index.js

@@ -0,0 +1,4 @@
+export { default as BarChart } from './Charts/BentoBarChart'
+export { default as PieChart } from './Charts/BentoPie'
+
+export { default as ChartConfigProvider } from './ChartConfigProvider'

package/src/types/chartTypes.ts

@@ -0,0 +1,70 @@
+export interface ChartDataType extends Array<ChartDataItem> {}
+
+export interface ChartDataItem {
+  x: string;
+  y: number;
+}
+
+export interface TooltipPayload extends Array<TooltipPayloadItem> {}
+
+interface TooltipPayloadItem {
+  name: string;
+  payload: {
+    x: string;
+  };
+  value: number;
+}
+
+export type HexColor = `#${string}`;
+
+export type ChartTheme = {
+  pie: {
+    [key in string]: HexColor[];
+  } & {
+    default: HexColor[];
+  };
+  bar: {
+    [key in string]: { fill: HexColor; missing: HexColor };
+  } & {
+    default: { fill: HexColor; missing: HexColor };
+  };
+};
+
+export type FilterCallback<T> = (value: T, index: number, array: T[]) => boolean;
+export type UnitaryMapCallback<T> = (value: T, index: number, array: T[]) => T;
+// export type BinaryMapCallback<T, U> = (value: T, index: number, array: T[]) => U;
+
+export type ChartFilterCallback = FilterCallback<ChartDataItem>;
+
+export type SupportedLng = 'en' | 'fr';
+
+type TranslationWords = 'Count' | 'Other';
+
+export type LngDictionary = {
+  [key in TranslationWords]: string;
+};
+
+export type TranslationObject = {
+  [key in SupportedLng]: LngDictionary;
+};
+
+// ###################  COMPONENT PROPS #####################
+interface BaseChartProps {
+  data: ChartDataType;
+  height: number;
+  preFilter?: ChartFilterCallback;
+  dataMap?: UnitaryMapCallback<ChartDataItem>;
+  postFilter?: ChartFilterCallback;
+  removeEmpty?: boolean;
+}
+
+export interface PieChartProps extends BaseChartProps {
+  colorTheme?: keyof ChartTheme['pie'];
+  sort?: boolean;
+}
+
+export interface BarChartProps extends BaseChartProps {
+  colorTheme?: keyof ChartTheme['bar'];
+  title?: string;
+  units: string;
+}

package/src/util/chartUtils.ts

@@ -0,0 +1,8 @@
+import { RADIAN } from '../constants/chartConstants';
+
+export const polarToCartesian = (cx: number, cy: number, radius: number, angle: number) => {
+  return {
+    x: cx + Math.cos(-RADIAN * angle) * radius,
+    y: cy + Math.sin(-RADIAN * angle) * radius,
+  };
+};

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "strictNullChecks": true,
+    "module": "es6",
+    "target": "es5",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": false,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "./src/"
+  ]
+}

package/webpack.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  mode: 'production',
+  entry: './src/index.js',
+  output: {
+    filename: 'BentoCharts.js',
+    library: 'bento-charts',
+    libraryTarget: 'umd',
+    globalObject: 'this',
+  },
+  module: {
+    rules: [
+      { test: /\.[tj](sx|s)?$/, use: { loader: 'ts-loader' }, exclude: /node_modules/ }
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+};