@czi-sds/data-viz 2.2.0 → 2.4.0

package/dist/shared/index3.esm.d.ts

@@ -0,0 +1,166 @@
+/// <reference types="react" />
+import { HTMLAttributes } from "react";
+import { DiscreteColorGeneratorOptions, TooltipTableContentProps } from "@czi-sds/components";
+
+//#region src/core/StackedBarChart/StackedBarChart.types.d.ts
+interface StackedBarChartDataItem {
+  /**
+   * The segment's label in the legend, and the key the animations track it by.
+   * Must be unique within the chart.
+   */
+  name: string;
+  /**
+   * The quantity the segment stands for.
+   */
+  value: number;
+  /**
+   * Any CSS color. Without it the segment takes a generated palette color,
+   * which can shift as categories come and go.
+   */
+  color?: string;
+  /**
+   * A unit for this item's counted value, for data that mixes units across
+   * categories.
+   */
+  unit?: string;
+  /**
+   * Takes the segment and its legend item out of every interaction: no hover,
+   * no tooltip, no selection.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Content for a TooltipTable shown above the segment on hover. Use it for the
+   * breakdown behind the number; a segment without it has no tooltip.
+   */
+  tooltip?: TooltipTableContentProps;
+}
+interface StackedBarChartProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A heading above the bar. It is also what makes room for the badge; with no
+   * title, no badge is drawn.
+   */
+  title?: string;
+  /**
+   * Overrides the badge text, which otherwise counts the data and the selection
+   * ("7", or "3 of 7").
+   */
+  badge?: string;
+  /**
+   * Removes the badge, leaving the title on its own.
+   * @default false
+   */
+  hideBadge?: boolean;
+  /**
+   * The segments, in the order they are drawn.
+   */
+  data: StackedBarChartDataItem[];
+  /**
+   * Any CSS width; a number is read as pixels. It sets the width of the whole
+   * chart, legend included.
+   * @default 100%
+   */
+  width?: number | string;
+  /**
+   * Height of the bar in pixels. Values below 1 are clamped to 1, so the bar
+   * cannot disappear.
+   * @default 16
+   */
+  barHeight?: number;
+  /**
+   * Draws the legend below the bar. It is the only place segment names appear,
+   * and the only part of the chart a keyboard can reach.
+   * @default true
+   */
+  showLegend?: boolean;
+  /**
+   * Shows each item's value beside its name in the legend.
+   * @default true
+   */
+  showLegendValues?: boolean;
+  /**
+   * "percentage" shows the segment's share of the bar, rounded. "count" shows
+   * the raw value followed by the item's unit, or the chart's unit if the item
+   * has none.
+   * @default "percentage"
+   */
+  legendValueFormat?: "percentage" | "count";
+  /**
+   * Indices into data that are currently selected. The chart is controlled: it
+   * draws this and never changes it.
+   */
+  selectedIndices?: number[];
+  /**
+   * Called with the next selection when a segment or legend item is clicked.
+   * Without it, clicking selects nothing.
+   */
+  onSelectionChange?: (selectedIndices: number[], selectedData: StackedBarChartDataItem[]) => void;
+  /**
+   * Called when the pointer enters a segment. The chart already syncs its own
+   * hover highlight between bar and legend, so this is for driving something
+   * outside it.
+   */
+  onSegmentMouseEnter?: (item: StackedBarChartDataItem, index: number) => void;
+  /**
+   * Called when the pointer leaves a segment.
+   */
+  onSegmentMouseLeave?: (item: StackedBarChartDataItem, index: number) => void;
+  /**
+   * Called when the pointer enters a legend item.
+   */
+  onLegendItemMouseEnter?: (item: StackedBarChartDataItem, index: number) => void;
+  /**
+   * Called when the pointer leaves a legend item.
+   */
+  onLegendItemMouseLeave?: (item: StackedBarChartDataItem, index: number) => void;
+  /**
+   * Fires on a segment click, alongside any selection change rather than
+   * instead of it.
+   */
+  onSegmentClick?: (item: StackedBarChartDataItem, index: number) => void;
+  /**
+   * The same, for a click on a legend item.
+   */
+  onLegendItemClick?: (item: StackedBarChartDataItem, index: number) => void;
+  /**
+   * What a selection does to the unselected segments: fade them to 20% opacity,
+   * or drop them from the bar and let the rest take the space.
+   * @default "dim"
+   */
+  selectionBehavior?: "dim" | "hide";
+  /**
+   * Whether the bar shows a breakdown of the data (segments always fill it) or
+   * progress towards maxAmount.
+   * @default "proportional"
+   */
+  mode?: "proportional" | "cumulative";
+  /**
+   * Cumulative mode only. The value the full bar represents. Any difference
+   * between it and the sum of the data is drawn as the Remaining segment.
+   */
+  maxAmount?: number;
+  /**
+   * Name of the grey gap segment in cumulative mode.
+   * @default "Remaining"
+   */
+  remainingLabel?: string;
+  /**
+   * A unit for the Remaining segment's value alone.
+   */
+  remainingUnit?: string;
+  /**
+   * The unit appended to counted values, for items that do not carry one of
+   * their own.
+   */
+  unit?: string;
+  /**
+   * Tunes the generated palette (start hue, rotations, lightness range, gamma).
+   * Items with their own color are untouched by it.
+   */
+  colorGeneratorOptions?: DiscreteColorGeneratorOptions;
+}
+//#endregion
+//#region src/core/StackedBarChart/index.d.ts
+declare const StackedBarChart: (props: StackedBarChartProps) => JSX.Element;
+//#endregion
+export { StackedBarChartDataItem as n, StackedBarChartProps as r, StackedBarChart as t };

package/dist/shared/objectSpread2.cjs.js

@@ -0,0 +1,124 @@
+"use client";
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+//#region \0@oxc-project+runtime@0.134.0/helpers/esm/objectWithoutPropertiesLoose.js
+function _objectWithoutPropertiesLoose(r, e) {
+	if (null == r) return {};
+	var t = {};
+	for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+		if (e.includes(n)) continue;
+		t[n] = r[n];
+	}
+	return t;
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.134.0/helpers/esm/objectWithoutProperties.js
+function _objectWithoutProperties(e, t) {
+	if (null == e) return {};
+	var o, r, i = _objectWithoutPropertiesLoose(e, t);
+	if (Object.getOwnPropertySymbols) {
+		var s = Object.getOwnPropertySymbols(e);
+		for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+	}
+	return i;
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.134.0/helpers/esm/typeof.js
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.134.0/helpers/esm/toPrimitive.js
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.134.0/helpers/esm/toPropertyKey.js
+function toPropertyKey(t) {
+	var i = toPrimitive(t, "string");
+	return "symbol" == _typeof(i) ? i : i + "";
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.134.0/helpers/esm/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.134.0/helpers/esm/objectSpread2.js
+function ownKeys(e, r) {
+	var t = Object.keys(e);
+	if (Object.getOwnPropertySymbols) {
+		var o = Object.getOwnPropertySymbols(e);
+		r && (o = o.filter(function(r) {
+			return Object.getOwnPropertyDescriptor(e, r).enumerable;
+		})), t.push.apply(t, o);
+	}
+	return t;
+}
+function _objectSpread2(e) {
+	for (var r = 1; r < arguments.length; r++) {
+		var t = null != arguments[r] ? arguments[r] : {};
+		r % 2 ? ownKeys(Object(t), !0).forEach(function(r) {
+			_defineProperty(e, r, t[r]);
+		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r) {
+			Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+		});
+	}
+	return e;
+}
+//#endregion
+Object.defineProperty(exports, "__toESM", {
+	enumerable: true,
+	get: function() {
+		return __toESM;
+	}
+});
+Object.defineProperty(exports, "_objectSpread2", {
+	enumerable: true,
+	get: function() {
+		return _objectSpread2;
+	}
+});
+Object.defineProperty(exports, "_objectWithoutProperties", {
+	enumerable: true,
+	get: function() {
+		return _objectWithoutProperties;
+	}
+});

package/dist/shared/objectSpread2.esm.js

@@ -0,0 +1,85 @@
+"use client";
+//#region \0@oxc-project+runtime@0.134.0/helpers/esm/objectWithoutPropertiesLoose.js
+function _objectWithoutPropertiesLoose(r, e) {
+	if (null == r) return {};
+	var t = {};
+	for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+		if (e.includes(n)) continue;
+		t[n] = r[n];
+	}
+	return t;
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.134.0/helpers/esm/objectWithoutProperties.js
+function _objectWithoutProperties(e, t) {
+	if (null == e) return {};
+	var o, r, i = _objectWithoutPropertiesLoose(e, t);
+	if (Object.getOwnPropertySymbols) {
+		var s = Object.getOwnPropertySymbols(e);
+		for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+	}
+	return i;
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.134.0/helpers/esm/typeof.js
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.134.0/helpers/esm/toPrimitive.js
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.134.0/helpers/esm/toPropertyKey.js
+function toPropertyKey(t) {
+	var i = toPrimitive(t, "string");
+	return "symbol" == _typeof(i) ? i : i + "";
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.134.0/helpers/esm/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.134.0/helpers/esm/objectSpread2.js
+function ownKeys(e, r) {
+	var t = Object.keys(e);
+	if (Object.getOwnPropertySymbols) {
+		var o = Object.getOwnPropertySymbols(e);
+		r && (o = o.filter(function(r) {
+			return Object.getOwnPropertyDescriptor(e, r).enumerable;
+		})), t.push.apply(t, o);
+	}
+	return t;
+}
+function _objectSpread2(e) {
+	for (var r = 1; r < arguments.length; r++) {
+		var t = null != arguments[r] ? arguments[r] : {};
+		r % 2 ? ownKeys(Object(t), !0).forEach(function(r) {
+			_defineProperty(e, r, t[r]);
+		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r) {
+			Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+		});
+	}
+	return e;
+}
+//#endregion
+export { _objectWithoutProperties as n, _objectSpread2 as t };

package/package.json

@@ -1,9 +1,63 @@
 {
   "name": "@czi-sds/data-viz",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "main": "dist/index.cjs.js",
   "types": "dist/index.cjs.d.ts",
   "module": "dist/index.esm.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.esm.d.ts",
+        "default": "./dist/index.esm.js"
+      },
+      "require": {
+        "types": "./dist/index.cjs.d.ts",
+        "default": "./dist/index.cjs.js"
+      }
+    },
+    "./HeatmapChart": {
+      "import": {
+        "types": "./dist/HeatmapChart.esm.d.ts",
+        "default": "./dist/HeatmapChart.esm.js"
+      },
+      "require": {
+        "types": "./dist/HeatmapChart.cjs.d.ts",
+        "default": "./dist/HeatmapChart.cjs.js"
+      }
+    },
+    "./ProteinStructureViewer": {
+      "import": {
+        "types": "./dist/ProteinStructureViewer.esm.d.ts",
+        "default": "./dist/ProteinStructureViewer.esm.js"
+      },
+      "require": {
+        "types": "./dist/ProteinStructureViewer.cjs.d.ts",
+        "default": "./dist/ProteinStructureViewer.cjs.js"
+      }
+    },
+    "./StackedBarChart": {
+      "import": {
+        "types": "./dist/StackedBarChart.esm.d.ts",
+        "default": "./dist/StackedBarChart.esm.js"
+      },
+      "require": {
+        "types": "./dist/StackedBarChart.cjs.d.ts",
+        "default": "./dist/StackedBarChart.cjs.js"
+      }
+    },
+    "./colorScales": {
+      "import": {
+        "types": "./dist/colorScales.esm.d.ts",
+        "default": "./dist/colorScales.esm.js"
+      },
+      "require": {
+        "types": "./dist/colorScales.cjs.d.ts",
+        "default": "./dist/colorScales.cjs.js"
+      }
+    },
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
   "author": "",
   "homepage": "https://github.com/chanzuckerberg/sci-components/tree/main/packages/sci-data-viz#readme",
   "description": "2023 Science Initiative Data Visualization Component Library",
@@ -67,6 +121,14 @@
     "react-dom": ">=18.0.0",
     "rxjs": "^7.8.2"
   },
+  "peerDependenciesMeta": {
+    "molstar": {
+      "optional": true
+    },
+    "rxjs": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@reduxjs/toolkit": "^2.1.0",
     "@types/chroma-js": "^3.1.2",
@@ -84,5 +146,5 @@
     "echarts": "^6.0.0",
     "lodash": "^4.17.21"
   },
-  "gitHead": "d2e4320c4fe8a6a90abde1ce2633faa76d4c73fa"
+  "gitHead": "07207d9c4e45054e5c3cde8d6241c8d1442b1d71"
 }