td-plots 1.2.3 → 1.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,8 +3,7 @@ import './plotStyles.scss';
3
3
  export type HistogramPlotProps = {
4
4
  data: number[] | Date[];
5
5
  unselectedData?: number[] | Date[];
6
- showMeanLine?: boolean;
7
- showAllDataMeanLine?: boolean;
6
+ showMeanLines?: boolean;
8
7
  title?: string;
9
8
  xAxisTitle?: string;
10
9
  barColor?: string;
package/dist/index.esm.js CHANGED
@@ -5840,17 +5840,17 @@ var Loading = function () {
5840
5840
  var Plot$2 = lazy(function () { return import('react-plotly.js'); });
5841
5841
  var HistogramPlot = function (props) {
5842
5842
  var _a, _b;
5843
- var data = props.data, title = props.title, xAxisTitle = props.xAxisTitle, _c = props.barColor, barColor = _c === void 0 ? 'rgb(72, 72, 74)' : _c, _d = props.unselectedBarColor, unselectedBarColor = _d === void 0 ? 'rgba(203, 195, 195, 0.88)' : _d, _e = props.selectorsColor, selectorsColor = _e === void 0 ? 'black' : _e, _f = props.showMeanLine, showMeanLine = _f === void 0 ? true : _f, _g = props.showAllDataMeanLine, showAllDataMeanLine = _g === void 0 ? true : _g, containerStyleOverrides = props.containerStyleOverrides, _h = props.unselectedData, unselectedData = _h === void 0 ? [] : _h, _j = props.handleClickOrSelection, handleClickOrSelection = _j === void 0 ? function () { } : _j, _k = props.onDeselect, onDeselect = _k === void 0 ? function () { } : _k, plotId = props.plotId, _l = props.selectByBin, selectByBin = _l === void 0 ? false : _l;
5843
+ var data = props.data, title = props.title, xAxisTitle = props.xAxisTitle, _c = props.barColor, barColor = _c === void 0 ? 'rgb(72, 72, 74)' : _c, _d = props.unselectedBarColor, unselectedBarColor = _d === void 0 ? 'rgba(203, 195, 195, 0.88)' : _d, _e = props.selectorsColor, selectorsColor = _e === void 0 ? 'black' : _e, _f = props.showMeanLines, showMeanLines = _f === void 0 ? true : _f, containerStyleOverrides = props.containerStyleOverrides, _g = props.unselectedData, unselectedData = _g === void 0 ? [] : _g, _h = props.handleClickOrSelection, handleClickOrSelection = _h === void 0 ? function () { } : _h, _j = props.onDeselect, onDeselect = _j === void 0 ? function () { } : _j, plotId = props.plotId, _k = props.selectByBin, selectByBin = _k === void 0 ? false : _k;
5844
5844
  // Ref for plot container
5845
5845
  var containerRef = useRef(null);
5846
5846
  // Track any selections made in this plot so we can style the selection box.
5847
- var _m = useState(null), selectedRange = _m[0], setSelectedRange = _m[1];
5847
+ var _l = useState(null), selectedRange = _l[0], setSelectedRange = _l[1];
5848
5848
  // Set the bins based on the entire data set.
5849
5849
  var nBins = Math.ceil(Math.sqrt(data.length + unselectedData.length));
5850
5850
  // Plotly determines "nice" bins which consequently means it internally decides the axis range. We need
5851
5851
  // to access that information once the plot has been initialized so that we can prevent the
5852
5852
  // axis range from changing during interaction. Dates use strings.
5853
- var _o = useState(undefined), fixedXAxisRange = _o[0], setFixedXAxisRange = _o[1];
5853
+ var _m = useState(undefined), fixedXAxisRange = _m[0], setFixedXAxisRange = _m[1];
5854
5854
  // Once the plot is drawn, record the initial axis range so we can keep it fixed.
5855
5855
  // figure should be Readonly<Plotly.Figure> but react-plotly.js doesn't expose that type, so we use any.
5856
5856
  var handlePlotUpdate = function (figure, graphDiv) {
@@ -5866,7 +5866,6 @@ var HistogramPlot = function (props) {
5866
5866
  var computedRange = typeof (range[0]) === 'string'
5867
5867
  ? [new Date(range[0]), new Date(range[1])]
5868
5868
  : [range[0], range[1]];
5869
- console.log('Captured range from onUpdate:', computedRange);
5870
5869
  setFixedXAxisRange(computedRange);
5871
5870
  }
5872
5871
  }
@@ -5998,11 +5997,12 @@ var HistogramPlot = function (props) {
5998
5997
  handleClickOrSelection(minValue, maxValue);
5999
5998
  }
6000
5999
  };
6001
- console.log('fixed range', fixedXAxisRange);
6002
6000
  // Create the selected range box
6003
6001
  var selectedRangeBox = useMemo(function () {
6004
6002
  if (!selectedRange)
6005
6003
  return [];
6004
+ if (unselectedData.length === 0)
6005
+ return []; // Don't show the box if the entire dataset is selected.
6006
6006
  // Create a multiply-like effect by using a semi-transparent dark overlay
6007
6007
  var multiplyColor = 'rgba(29, 104, 185, 0.1)';
6008
6008
  return [{
@@ -6019,7 +6019,7 @@ var HistogramPlot = function (props) {
6019
6019
  },
6020
6020
  layer: 'above' // Ensure the selection box is above the bars
6021
6021
  }];
6022
- }, [selectedRange]);
6022
+ }, [selectedRange, unselectedData]);
6023
6023
  var unselectedTrace = {
6024
6024
  x: unselectedData,
6025
6025
  type: 'histogram',
@@ -6058,7 +6058,7 @@ var HistogramPlot = function (props) {
6058
6058
  // Calculate the mean of the selected data using normalized data
6059
6059
  var meanValue = (_a = calculateMean(data)) !== null && _a !== void 0 ? _a : 0; // Default to 0 if no data
6060
6060
  var meanLineRadius = 0.01; // distance from the top of the y axis to the top/bottom end of the mean line
6061
- var meanLine = showMeanLine ? [{
6061
+ var meanLine = (showMeanLines && data.length > 0) ? [{
6062
6062
  type: 'line',
6063
6063
  x0: meanValue,
6064
6064
  y0: 1 - meanLineRadius,
@@ -6073,7 +6073,7 @@ var HistogramPlot = function (props) {
6073
6073
  // Draw mean line for all data
6074
6074
  var allData = __spreadArray(__spreadArray([], data, true), unselectedData, true);
6075
6075
  var allDataMeanValue = (_b = calculateMean(allData)) !== null && _b !== void 0 ? _b : 0;
6076
- var allDataMeanLine = (showAllDataMeanLine && unselectedData.length > 0) ? [{
6076
+ var allDataMeanLine = (showMeanLines && unselectedData.length > 0 && data.length > 0) ? [{
6077
6077
  type: 'line',
6078
6078
  x0: allDataMeanValue,
6079
6079
  y0: 1 - meanLineRadius,
@@ -6142,7 +6142,7 @@ var HistogramPlot = function (props) {
6142
6142
  dragmode: 'select', // Enable drag to select
6143
6143
  selectdirection: 'h', // User can select in horizontal direction only
6144
6144
  shapes: __spreadArray(__spreadArray(__spreadArray([], allDataMeanLine, true), meanLine, true), selectedRangeBox, true), // Add the mean line and selection box
6145
- annotations: (showMeanLine && meanLine) ? [{
6145
+ annotations: (showMeanLines && meanLine && data.length > 0) ? [{
6146
6146
  x: meanValue,
6147
6147
  y: 1 + meanLineRadius + 0.04, // Position above the mean line. Value set with respect to the paper coordinates.
6148
6148
  yref: 'paper',