react: @carbon/charts

packages/chart-react-carbon/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: "../react/.eslintrc.js",
+};

packages/chart-react-carbon/.ncurc

@@ -0,0 +1,3 @@
+{
+  "reject": ["d3"]
+}

packages/chart-react-carbon/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@tony/cv-chart-react-carbon",
+  "license": "All rights reserved",
+  "private": true,
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "module": "src/index.ts",
+  "scripts": {
+    "start": "echo 'noop'",
+    "build": "echo 'noop'",
+    "test": "echo 'noop'",
+    "lint": "eslint . -c .eslintrc.js --ext .ts,.tsx",
+    "prettier": "prettier src webpack --write",
+    "format": "yarn run prettier",
+    "update": "yarn run ncu",
+    "ncu": "ncu",
+    "clean": "rm -rf dist/"
+  },
+  "devDependencies": {
+    "@types/node": "^14.14.21",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "cross-env": "^7.0.3",
+    "eslint-plugin-react": "^7.22.0",
+    "prettier": "^2.2.1",
+    "typescript": "^4.1.3"
+  },
+  "peerDependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.13.0",
+    "@typescript-eslint/parser": "^4.13.0",
+    "eslint": "^7.18.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-promise": "^4.2.1"
+  },
+  "dependencies": {
+    "@carbon/charts": "^0.41.24",
+    "@carbon/charts-react": "^0.41.24",
+    "@datorama/akita": "^6.0.0",
+    "@tony/cv-lib": "*",
+    "carbon-components": "^10.26.0",
+    "d3": "5.x",
+    "fast-deep-equal": "^3.1.3",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "rxjs": "^6.6.3"
+  }
+}

packages/chart-react-carbon/src/charts.tsx

@@ -0,0 +1,106 @@
+import { DonutChart, StackedAreaChart } from "@carbon/charts-react";
+import React from "react";
+
+import type { Observable, Subscription } from "rxjs";
+
+import { carbonChartQuery as query } from "./hub";
+import { DonutChartProps, LineChartProps } from "./query";
+import equal from "fast-deep-equal";
+
+import "@carbon/charts/styles.css";
+
+// Todo consolidate this into common code somewhere
+export function onEmit<T>(
+  source$: Observable<T>,
+  nextFn: (value: T) => void
+): Subscription {
+  return source$.subscribe(nextFn, console.error);
+}
+
+// Same as onEmit
+export const useAsyncEffect = (
+  effect: React.EffectCallback | (() => Promise<void>),
+  dependencies?: unknown[]
+): void =>
+  React.useEffect(() => {
+    effect();
+    return () => void 0;
+  }, dependencies);
+
+export const LanguagePieChart: React.FC<Partial<DonutChartProps>> = (props) => {
+  const [chartData, setChartData] = React.useState<DonutChartProps>();
+  const languageChartRef = React.useRef<DonutChart>(null);
+
+  useAsyncEffect(async () => {
+    if (!chartData) {
+      setChartData((await query.getDonutChart()) as DonutChartProps);
+    }
+    return void 0;
+  });
+
+  React.useEffect(() => void 0, [chartData]);
+  React.useEffect(() => {
+    const subscriptions: Subscription[] = [
+      onEmit<DonutChartProps>(query.subDonutChart$(), (newChart) => {
+        const isChanged = !equal(newChart, chartData);
+        console.log("pie published", newChart, chartData, { isChanged });
+
+        if (isChanged) {
+          setChartData(newChart);
+        }
+      }),
+    ];
+
+    return () => {
+      subscriptions.map((it) => it.unsubscribe());
+    };
+  }, []);
+
+  if (!chartData) {
+    return null;
+  }
+
+  return <DonutChart ref={languageChartRef} {...chartData} {...props} />;
+};
+
+export const ActivityLineChart: React.FC<Partial<LineChartProps>> = (props) => {
+  const [chartData, setChartData] = React.useState<LineChartProps>();
+  const lineChartRef = React.useRef<StackedAreaChart>(null);
+
+  useAsyncEffect(async () => {
+    if (!chartData) {
+      setChartData((await query.getLineChart()) as LineChartProps);
+    }
+    return void 0;
+  });
+
+  React.useEffect(() => void 0, [chartData]);
+  React.useEffect(() => {
+    const subscriptions: Subscription[] = [
+      onEmit<LineChartProps>(query.subLineChart$(), (newChart) => {
+        const isChanged = !equal(newChart, chartData);
+        console.log("pie published", newChart, chartData, { isChanged });
+
+        if (isChanged) {
+          setChartData(newChart);
+        }
+      }),
+    ];
+
+    return () => {
+      subscriptions.map((it) => it.unsubscribe());
+    };
+  }, []);
+
+  if (!chartData) {
+    return null;
+  }
+
+  return (
+    <StackedAreaChart
+      ref={lineChartRef}
+      {...chartData}
+      {...props}
+    ></StackedAreaChart>
+  );
+};

packages/chart-react-carbon/src/hub.ts

@@ -0,0 +1,20 @@
+import {
+  activitiesQuery,
+  activityTypesQuery,
+  cvStore,
+  query,
+  orgsQuery,
+  orgTypesQuery,
+  languagesQuery,
+} from "@tony/cv-lib/hub";
+import { CarbonChartQuery } from "./query";
+
+export const carbonChartQuery = new CarbonChartQuery(
+  cvStore,
+  query,
+  activitiesQuery,
+  activityTypesQuery,
+  languagesQuery,
+  orgsQuery,
+  orgTypesQuery
+);

packages/chart-react-carbon/src/query.ts

@@ -0,0 +1,174 @@
+import type { Observable } from "rxjs";
+import {
+  ChartConfig,
+  DonutChartOptions,
+  LineChartOptions,
+} from "@carbon/charts/interfaces";
+
+import { combineQueries } from "@datorama/akita";
+import { map, take } from "rxjs/operators";
+
+import { CVQuery } from "@tony/cv-lib/search/query";
+import type {
+  OrgsQuery,
+  OrgTypesQuery,
+  LanguagesQuery,
+  ActivityTypesQuery,
+  ActivitiesQuery,
+} from "@tony/cv-lib/search/query";
+
+import { CVStore } from "@tony/cv-lib/search/store";
+
+export type DonutChartProps = ChartConfig<DonutChartOptions>;
+export type LineChartProps = ChartConfig<LineChartOptions>;
+
+export interface Results {
+  // Charts
+  donutChart: DonutChartProps;
+  lineChart: LineChartProps;
+}
+
+const DONUT_CHART_DEFAULT_OPTIONS: DonutChartOptions = {
+  legend: {
+    enabled: false, // Disable for now: https://github.com/carbon-design-system/carbon-charts/issues/916
+  },
+  resizable: true,
+  donut: {
+    center: {
+      label: "Results",
+    },
+  },
+  height: "400px",
+  width: "400px",
+};
+
+export const LINE_CHART_DEFAULT_OPTIONS: LineChartOptions = {
+  // So UX doesn't get:
+  // scales-cartesian.js:156 Uncaught TypeError: Cannot read property 'left' of null
+  resizable: true,
+  legend: {
+    enabled: false, // Disable for now: https://github.com/carbon-design-system/carbon-charts/issues/916
+  },
+  height: "400px",
+  axes: {
+    left: {
+      stacked: true,
+      // @ts-ignore
+      scaleType: "linear",
+      mapsTo: "value",
+    },
+    bottom: {
+      // @ts-ignore
+      scaleType: "time",
+      mapsTo: "date",
+    },
+  },
+  curve: "curveMonotoneX",
+  experimental: true,
+};
+
+export const DEFAULT_RESULTS: Results = {
+  // Charts
+  donutChart: {
+    options: DONUT_CHART_DEFAULT_OPTIONS,
+    data: [],
+  },
+  lineChart: {
+    options: LINE_CHART_DEFAULT_OPTIONS, // These also cause a crash if empty
+    data: [
+      // These are needed to prevent a crash with empty values
+      { group: "Rust", value: 90 },
+      { group: "Rust 2", value: 20 },
+    ],
+  },
+};
+
+export class CarbonChartQuery extends CVQuery {
+  constructor(
+    protected store: CVStore,
+    protected cvQuery: CVQuery,
+    protected activitiesQuery: ActivitiesQuery,
+    protected activityTypesQuery: ActivityTypesQuery,
+    protected languagesQuery: LanguagesQuery,
+    protected orgsQuery: OrgsQuery,
+    protected orgTypesQuery: OrgTypesQuery
+  ) {
+    super(
+      store,
+      activitiesQuery,
+      activityTypesQuery,
+      languagesQuery,
+      orgsQuery,
+      orgTypesQuery
+    );
+  }
+
+  //
+  // Chart
+  //
+  subDonutChart$(): Observable<DonutChartProps> {
+    return combineQueries([
+      this.languagesQuery.selectBackgroundColors$(),
+      this.visibleLanguageCount$(),
+      this.visibleActivities$(),
+    ]).pipe(
+      map(([bgColorMap, languageMap, visibleActivities]) => {
+        return {
+          data: Object.entries(languageMap).map(([languageName, count]) => {
+            return { group: languageName, value: count };
+          }),
+          options: {
+            ...DONUT_CHART_DEFAULT_OPTIONS,
+            getFillColor: (datasetLabel, label, data, defaultFillColor) => {
+              return bgColorMap[datasetLabel] ?? defaultFillColor ?? "";
+            },
+            donut: {
+              center: {
+                number: visibleActivities.length, // Prevent multi language activities from summing, show activity count
+                label: "Results",
+              },
+            },
+            pie: {
+              labels: { formatter: () => "" },
+            },
+          } as DonutChartOptions,
+        } as DonutChartProps;
+      })
+    );
+  }
+
+  // await $queries.CV.getDonutChart()
+  getDonutChart(): Promise<DonutChartProps> {
+    return this.subDonutChart$().pipe(take(1)).toPromise();
+  }
+
+  subLineChart$(): Observable<LineChartProps> {
+    return this.visibleActivityYearCount$().pipe(
+      map((activityYearMap) => {
+        return {
+          data: Object.values(activityYearMap).length
+            ? Object.entries(activityYearMap).map(([year, count]) => {
+                return {
+                  group: "Results",
+                  date: `${year}-01-01T00:00:00.000Z`,
+                  value: count,
+                };
+              })
+            : [
+                {
+                  group: "Results",
+                  date: "2019-01-01T06:00:00.000Z",
+                  value: 0,
+                },
+              ],
+          options: LINE_CHART_DEFAULT_OPTIONS,
+        } as LineChartProps;
+      })
+    );
+  }
+
+  // await $queries.CV.getLineChart()
+  getLineChart(): Promise<LineChartProps> {
+    return this.subLineChart$().pipe(take(1)).toPromise();
+  }
+}

packages/chart-react-carbon/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../react/tsconfig.json",
+  "include": ["src/*"]
+}

packages/chart-react-plotly/src/charts.tsx

@@ -1,4 +1,4 @@
-/// <reference path="./custom.d.ts" />
+import "./custom.d.ts";
 import React from "react";
 import Plotly from "plotly.js/dist/plotly";
 import type { Observable, Subscription } from "rxjs";