td-plots 1.0.1 → 1.0.2
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.
- package/dist/components/Histogram.d.ts +2 -0
- package/dist/index.esm.js +20 -6
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +19 -5
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -6,6 +6,8 @@ export type HistogramPlotProps = {
|
|
|
6
6
|
barColor?: string;
|
|
7
7
|
unselectedBarColor?: string;
|
|
8
8
|
selectorsColor?: string;
|
|
9
|
+
onSelected?: (event: Plotly.PlotSelectionEvent) => void;
|
|
10
|
+
onClick?: (event: Plotly.PlotMouseEvent) => void;
|
|
9
11
|
};
|
|
10
12
|
export declare const HistogramPlot: (props: HistogramPlotProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
13
|
export default HistogramPlot;
|
package/dist/index.esm.js
CHANGED
|
@@ -1,9 +1,23 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { lazy } from 'react';
|
|
2
|
+
import { lazy, Suspense } from 'react';
|
|
3
3
|
|
|
4
4
|
var Plot$1 = lazy(function () { return import('react-plotly.js'); });
|
|
5
5
|
var HistogramPlot = function (props) {
|
|
6
|
-
var data = props.data, title = props.title, xAxisTitle = props.xAxisTitle, _a = props.barColor, barColor = _a === void 0 ? 'rgb(72, 72, 74)' : _a, _b = props.unselectedBarColor, unselectedBarColor = _b === void 0 ? 'rgba(203, 195, 195, 0.88)' : _b, _c = props.selectorsColor, selectorsColor = _c === void 0 ? 'black' : _c;
|
|
6
|
+
var data = props.data, title = props.title, xAxisTitle = props.xAxisTitle, _a = props.barColor, barColor = _a === void 0 ? 'rgb(72, 72, 74)' : _a, _b = props.unselectedBarColor, unselectedBarColor = _b === void 0 ? 'rgba(203, 195, 195, 0.88)' : _b, _c = props.selectorsColor, selectorsColor = _c === void 0 ? 'black' : _c, onSelected = props.onSelected, onClick = props.onClick;
|
|
7
|
+
// Combined handler for both click and selection events, so a user can choose either
|
|
8
|
+
// Plotly prioritizes the selection handler over the click handler in general, so we use this strategy
|
|
9
|
+
// to apply both.
|
|
10
|
+
var handleSelection = function (event) {
|
|
11
|
+
if (event.points && event.points.length === 1 && onClick) {
|
|
12
|
+
// If the user clicks on or selects a single point, we'll treat it as a click.
|
|
13
|
+
// Coule be improved by checking the range of the selection.
|
|
14
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
15
|
+
}
|
|
16
|
+
else if (event.points && event.points.length > 1) {
|
|
17
|
+
// Multiple points or area - treat as selection
|
|
18
|
+
onSelected === null || onSelected === void 0 ? void 0 : onSelected(event);
|
|
19
|
+
}
|
|
20
|
+
};
|
|
7
21
|
var plotlyData = [
|
|
8
22
|
{
|
|
9
23
|
x: data,
|
|
@@ -64,7 +78,7 @@ var HistogramPlot = function (props) {
|
|
|
64
78
|
ticksuffix: ' ', // Add space between y axis and ticks
|
|
65
79
|
},
|
|
66
80
|
bargap: 0.03, // Gap between bars
|
|
67
|
-
dragmode: 'select',
|
|
81
|
+
dragmode: 'select', // Enable selection for both click and drag
|
|
68
82
|
selectdirection: 'h', // Allow selection in horizontal direction
|
|
69
83
|
};
|
|
70
84
|
var config = {
|
|
@@ -74,9 +88,9 @@ var HistogramPlot = function (props) {
|
|
|
74
88
|
scrollZoom: false, // Disable zooming with scroll
|
|
75
89
|
staticPlot: false, // Enable interactivity
|
|
76
90
|
};
|
|
77
|
-
return (jsx("div", { className: "plot-container", style: {
|
|
78
|
-
|
|
79
|
-
|
|
91
|
+
return (jsx(Suspense, { fallback: "Loading...", children: jsx("div", { className: "plot-container", style: {
|
|
92
|
+
'--selection-color': selectorsColor,
|
|
93
|
+
}, children: jsx(Plot$1, { data: plotlyData, layout: layout, config: config, onSelected: handleSelection }) }) }));
|
|
80
94
|
};
|
|
81
95
|
|
|
82
96
|
var Plot = lazy(function () { return import('react-plotly.js'); });
|
package/dist/index.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../src/components/Histogram.tsx","../src/components/TestPlot.tsx"],"sourcesContent":["import React, { lazy } from 'react';\nimport { PlotParams } from 'react-plotly.js';\nimport './plotStyles.scss'; // Importing styles for the plot\n\nconst Plot = lazy(() => import('react-plotly.js'));\n\nexport type HistogramPlotProps = {\n data: number[];\n title?: string;\n xAxisTitle?: string;\n barColor?: string; // Optional prop to set the color of the bars\n unselectedBarColor?: string; // Optional prop to set the color of unselected bars\n selectorsColor?: string; // Optional prop to set the color of elements in the selection box\n}\nexport const HistogramPlot = (props: HistogramPlotProps) => {\n\n const {\n data,\n title,\n xAxisTitle,\n barColor = 'rgb(72, 72, 74)',\n unselectedBarColor = 'rgba(203, 195, 195, 0.88)',\n selectorsColor = 'black',\n } = props;\n\n const plotlyData: PlotParams['data'] = [\n {\n x: data,\n type: 'histogram',\n marker: { \n color: barColor ?? 'blue',\n line: {\n color: \"white\",\n width: 0.5,\n },\n },\n // The following property is listed in the api. Not sure why typescript doesn't know about it.\n // Styles the unselected bars in the histogram\n //@ts-ignore\n unselected: {\n marker: { \n color: unselectedBarColor,\n }\n },\n hovertemplate: '[%{x})<br>Count: %{y}<extra></extra>', // Custom hover text\n }\n ];\n\n const layout: PlotParams['layout'] = {\n title: {text: title},\n xaxis: {\n title: {\n text: xAxisTitle\n },\n // range: [Math.min(...data, 0), Math.max(...data)], // Range needs to get padding on both sides based on bin size. Consider calculating bins here.\n showgrid: true,\n zeroline: true,\n showline: true,\n mirror: 'ticks',\n gridcolor: '#efefef',\n gridwidth: 0.2,\n zerolinecolor: '#969696',\n zerolinewidth: 1,\n linecolor: '#bababa',\n linewidth: 1,\n fixedrange: true, // Disable zooming\n ticklabelposition: 'outside',\n },\n yaxis: {\n title: {\n text: 'Count'\n },\n showgrid: true,\n zeroline: true,\n showline: true,\n mirror: 'ticks',\n gridcolor: '#efefef',\n gridwidth: 0.2,\n zerolinecolor: '#969696',\n zerolinewidth: 1,\n linecolor: '#bababa',\n linewidth: 1,\n fixedrange: true, // Disable zooming\n ticksuffix: ' ', // Add space between y axis and ticks\n },\n bargap: 0.03, // Gap between bars\n dragmode: 'select'
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../src/components/Histogram.tsx","../src/components/TestPlot.tsx"],"sourcesContent":["import React, { lazy, Suspense } from 'react';\nimport { PlotParams } from 'react-plotly.js';\nimport './plotStyles.scss'; // Importing styles for the plot\n\nconst Plot = lazy(() => import('react-plotly.js'));\n\nexport type HistogramPlotProps = {\n data: number[];\n title?: string;\n xAxisTitle?: string;\n barColor?: string; // Optional prop to set the color of the bars\n unselectedBarColor?: string; // Optional prop to set the color of unselected bars\n selectorsColor?: string; // Optional prop to set the color of elements in the selection box\n onSelected?: (event: Plotly.PlotSelectionEvent) => void; // Optional handler for when a user clicks and drags to select an area of the plot\n onClick?: (event: Plotly.PlotMouseEvent) => void; // Optional handler for click events on the plot\n}\nexport const HistogramPlot = (props: HistogramPlotProps) => {\n\n const {\n data,\n title,\n xAxisTitle,\n barColor = 'rgb(72, 72, 74)',\n unselectedBarColor = 'rgba(203, 195, 195, 0.88)',\n selectorsColor = 'black',\n onSelected,\n onClick,\n } = props;\n\n // Combined handler for both click and selection events, so a user can choose either\n // Plotly prioritizes the selection handler over the click handler in general, so we use this strategy\n // to apply both.\n const handleSelection = (event: any) => {\n if (event.points && event.points.length === 1 && onClick) {\n // If the user clicks on or selects a single point, we'll treat it as a click.\n // Coule be improved by checking the range of the selection.\n onClick?.(event);\n } else if (event.points && event.points.length > 1) {\n // Multiple points or area - treat as selection\n onSelected?.(event);\n }\n };\n\n const plotlyData: PlotParams['data'] = [\n {\n x: data,\n type: 'histogram',\n marker: { \n color: barColor ?? 'blue',\n line: {\n color: \"white\",\n width: 0.5,\n },\n },\n // The following property is listed in the api. Not sure why typescript doesn't know about it.\n // Styles the unselected bars in the histogram\n //@ts-ignore\n unselected: {\n marker: { \n color: unselectedBarColor,\n }\n },\n hovertemplate: '[%{x})<br>Count: %{y}<extra></extra>', // Custom hover text\n }\n ];\n\n const layout: PlotParams['layout'] = {\n title: {text: title},\n xaxis: {\n title: {\n text: xAxisTitle\n },\n // range: [Math.min(...data, 0), Math.max(...data)], // Range needs to get padding on both sides based on bin size. Consider calculating bins here.\n showgrid: true,\n zeroline: true,\n showline: true,\n mirror: 'ticks',\n gridcolor: '#efefef',\n gridwidth: 0.2,\n zerolinecolor: '#969696',\n zerolinewidth: 1,\n linecolor: '#bababa',\n linewidth: 1,\n fixedrange: true, // Disable zooming\n ticklabelposition: 'outside',\n },\n yaxis: {\n title: {\n text: 'Count'\n },\n showgrid: true,\n zeroline: true,\n showline: true,\n mirror: 'ticks',\n gridcolor: '#efefef',\n gridwidth: 0.2,\n zerolinecolor: '#969696',\n zerolinewidth: 1,\n linecolor: '#bababa',\n linewidth: 1,\n fixedrange: true, // Disable zooming\n ticksuffix: ' ', // Add space between y axis and ticks\n },\n bargap: 0.03, // Gap between bars\n dragmode: 'select', // Enable selection for both click and drag\n selectdirection: 'h', // Allow selection in horizontal direction\n };\n\n const config: PlotParams['config'] = {\n responsive: true, // Make the plot responsive\n displayModeBar: false, // Hide the mode bar\n displaylogo: false, // Hide the Plotly logo\n scrollZoom: false, // Disable zooming with scroll\n staticPlot: false, // Enable interactivity\n };\n\n return (\n <Suspense fallback=\"Loading...\">\n <div \n className=\"plot-container\"\n style={{\n '--selection-color': selectorsColor,\n } as React.CSSProperties}\n >\n <Plot \n data={plotlyData} \n layout={layout} \n config={config}\n onSelected={handleSelection}\n />\n </div>\n </Suspense>\n );\n}\n\nexport default HistogramPlot;\n","// A test bar plotly plot\nimport React, { lazy } from 'react';\nimport { PlotParams } from 'react-plotly.js';\n\nconst Plot = lazy(() => import('react-plotly.js'));\n\nexport type TestPlotProps = {\n yaxisTitle?: string;\n xaxisTitle?: string;\n}\nexport const TestPlot = (props: TestPlotProps) => {\n const data: PlotParams['data'] = [\n {\n x: [1, 2, 3, 4],\n y: [10, 15, 13, 17],\n type: 'bar' as const,\n marker: { color: 'blue' },\n },\n ];\n\n const layout = {\n title: {text: 'Test Bar Plot'},\n xaxis: { title: {text: props.xaxisTitle ?? 'X Axis'} },\n yaxis: { title: {text: props.yaxisTitle ?? 'Y Axis'} },\n };\n\n return <Plot data={data} layout={layout} />;\n};\n\nexport default TestPlot;\n"],"names":["Plot","_jsx"],"mappings":";;;AAIA,IAAMA,MAAI,GAAG,IAAI,CAAC,YAAA,EAAM,OAAA,OAAO,iBAAiB,CAAC,CAAA,EAAA,CAAC;AAY3C,IAAM,aAAa,GAAG,UAAC,KAAyB,EAAA;IAGnD,IAAA,IAAI,GAQF,KAAK,CAAA,IARH,EACJ,KAAK,GAOH,KAAK,CAAA,KAPF,EACL,UAAU,GAMR,KAAK,CAAA,UANG,EACV,EAAA,GAKE,KAAK,CAAA,QALqB,EAA5B,QAAQ,GAAA,EAAA,KAAA,MAAA,GAAG,iBAAiB,GAAA,EAAA,EAC5B,EAAA,GAIE,KAAK,CAAA,kBAJyC,EAAhD,kBAAkB,GAAA,EAAA,KAAA,MAAA,GAAG,2BAA2B,GAAA,EAAA,EAChD,EAAA,GAGE,KAAK,CAAA,cAHiB,EAAxB,cAAc,GAAA,EAAA,KAAA,MAAA,GAAG,OAAO,GAAA,EAAA,EACxB,UAAU,GAER,KAAK,CAAA,UAFG,EACV,OAAO,GACL,KAAK,CAAA,OADA;;;;IAMT,IAAM,eAAe,GAAG,UAAC,KAAU,EAAA;AACjC,QAAA,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,OAAO,EAAE;;;AAGxD,YAAA,OAAO,aAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAG,KAAK,CAAC;;AACX,aAAA,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;;AAElD,YAAA,UAAU,aAAV,UAAU,KAAA,MAAA,GAAA,MAAA,GAAV,UAAU,CAAG,KAAK,CAAC;;AAEvB,KAAC;AAED,IAAA,IAAM,UAAU,GAAuB;AACrC,QAAA;AACE,YAAA,CAAC,EAAE,IAAI;AACP,YAAA,IAAI,EAAE,WAAW;AACjB,YAAA,MAAM,EAAE;AACN,gBAAA,KAAK,EAAE,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,MAAA,GAAR,QAAQ,GAAI,MAAM;AACzB,gBAAA,IAAI,EAAE;AACJ,oBAAA,KAAK,EAAE,OAAO;AACd,oBAAA,KAAK,EAAE,GAAG;AACX,iBAAA;AACF,aAAA;;;;AAID,YAAA,UAAU,EAAE;AACV,gBAAA,MAAM,EAAE;AACN,oBAAA,KAAK,EAAE,kBAAkB;AAC1B;AACF,aAAA;YACD,aAAa,EAAE,sCAAsC;AACtD;KACF;AAED,IAAA,IAAM,MAAM,GAAyB;AACnC,QAAA,KAAK,EAAE,EAAC,IAAI,EAAE,KAAK,EAAC;AACpB,QAAA,KAAK,EAAE;AACL,YAAA,KAAK,EAAE;AACL,gBAAA,IAAI,EAAE;AACP,aAAA;;AAED,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,MAAM,EAAE,OAAO;AACf,YAAA,SAAS,EAAE,SAAS;AACpB,YAAA,SAAS,EAAE,GAAG;AACd,YAAA,aAAa,EAAE,SAAS;AACxB,YAAA,aAAa,EAAE,CAAC;AAChB,YAAA,SAAS,EAAE,SAAS;AACpB,YAAA,SAAS,EAAE,CAAC;YACZ,UAAU,EAAE,IAAI;AAChB,YAAA,iBAAiB,EAAE,SAAS;AAC7B,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,KAAK,EAAE;AACL,gBAAA,IAAI,EAAE;AACP,aAAA;AACD,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,MAAM,EAAE,OAAO;AACf,YAAA,SAAS,EAAE,SAAS;AACpB,YAAA,SAAS,EAAE,GAAG;AACd,YAAA,aAAa,EAAE,SAAS;AACxB,YAAA,aAAa,EAAE,CAAC;AAChB,YAAA,SAAS,EAAE,SAAS;AACpB,YAAA,SAAS,EAAE,CAAC;YACZ,UAAU,EAAE,IAAI;YAChB,UAAU,EAAE,GAAG;AAChB,SAAA;QACD,MAAM,EAAE,IAAI;QACZ,QAAQ,EAAE,QAAQ;QAClB,eAAe,EAAE,GAAG;KACrB;AAED,IAAA,IAAM,MAAM,GAAyB;QACnC,UAAU,EAAE,IAAI;QAChB,cAAc,EAAE,KAAK;QACrB,WAAW,EAAE,KAAK;QAClB,UAAU,EAAE,KAAK;QACjB,UAAU,EAAE,KAAK;KAClB;AAED,IAAA,QACEC,GAAA,CAAC,QAAQ,EAAA,EAAC,QAAQ,EAAC,YAAY,EAAA,QAAA,EAC7BA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,gBAAgB,EAC1B,KAAK,EAAE;AACL,gBAAA,mBAAmB,EAAE,cAAc;aACb,EAAA,QAAA,EAExBA,GAAA,CAACD,MAAI,EAAA,EACH,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,eAAe,EAAA,CAC3B,EAAA,CACE,EAAA,CACG;AAEf;;ACjIA,IAAM,IAAI,GAAG,IAAI,CAAC,YAAA,EAAM,OAAA,OAAO,iBAAiB,CAAC,CAAA,EAAA,CAAC;AAM3C,IAAM,QAAQ,GAAG,UAAC,KAAoB,EAAA;;AAC3C,IAAA,IAAM,IAAI,GAAuB;AAC/B,QAAA;YACE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;YACf,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AACnB,YAAA,IAAI,EAAE,KAAc;AACpB,YAAA,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;AAC1B,SAAA;KACF;AAED,IAAA,IAAM,MAAM,GAAG;AACb,QAAA,KAAK,EAAE,EAAC,IAAI,EAAE,eAAe,EAAC;AAC9B,QAAA,KAAK,EAAE,EAAE,KAAK,EAAE,EAAC,IAAI,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,QAAQ,EAAC,EAAE;AACtD,QAAA,KAAK,EAAE,EAAE,KAAK,EAAE,EAAC,IAAI,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,QAAQ,EAAC,EAAE;KACvD;IAED,OAAOC,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAA,CAAI;AAC7C;;;;"}
|
package/dist/index.js
CHANGED
|
@@ -5,7 +5,21 @@ var react = require('react');
|
|
|
5
5
|
|
|
6
6
|
var Plot$1 = react.lazy(function () { return import('react-plotly.js'); });
|
|
7
7
|
var HistogramPlot = function (props) {
|
|
8
|
-
var data = props.data, title = props.title, xAxisTitle = props.xAxisTitle, _a = props.barColor, barColor = _a === void 0 ? 'rgb(72, 72, 74)' : _a, _b = props.unselectedBarColor, unselectedBarColor = _b === void 0 ? 'rgba(203, 195, 195, 0.88)' : _b, _c = props.selectorsColor, selectorsColor = _c === void 0 ? 'black' : _c;
|
|
8
|
+
var data = props.data, title = props.title, xAxisTitle = props.xAxisTitle, _a = props.barColor, barColor = _a === void 0 ? 'rgb(72, 72, 74)' : _a, _b = props.unselectedBarColor, unselectedBarColor = _b === void 0 ? 'rgba(203, 195, 195, 0.88)' : _b, _c = props.selectorsColor, selectorsColor = _c === void 0 ? 'black' : _c, onSelected = props.onSelected, onClick = props.onClick;
|
|
9
|
+
// Combined handler for both click and selection events, so a user can choose either
|
|
10
|
+
// Plotly prioritizes the selection handler over the click handler in general, so we use this strategy
|
|
11
|
+
// to apply both.
|
|
12
|
+
var handleSelection = function (event) {
|
|
13
|
+
if (event.points && event.points.length === 1 && onClick) {
|
|
14
|
+
// If the user clicks on or selects a single point, we'll treat it as a click.
|
|
15
|
+
// Coule be improved by checking the range of the selection.
|
|
16
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
17
|
+
}
|
|
18
|
+
else if (event.points && event.points.length > 1) {
|
|
19
|
+
// Multiple points or area - treat as selection
|
|
20
|
+
onSelected === null || onSelected === void 0 ? void 0 : onSelected(event);
|
|
21
|
+
}
|
|
22
|
+
};
|
|
9
23
|
var plotlyData = [
|
|
10
24
|
{
|
|
11
25
|
x: data,
|
|
@@ -66,7 +80,7 @@ var HistogramPlot = function (props) {
|
|
|
66
80
|
ticksuffix: ' ', // Add space between y axis and ticks
|
|
67
81
|
},
|
|
68
82
|
bargap: 0.03, // Gap between bars
|
|
69
|
-
dragmode: 'select',
|
|
83
|
+
dragmode: 'select', // Enable selection for both click and drag
|
|
70
84
|
selectdirection: 'h', // Allow selection in horizontal direction
|
|
71
85
|
};
|
|
72
86
|
var config = {
|
|
@@ -76,9 +90,9 @@ var HistogramPlot = function (props) {
|
|
|
76
90
|
scrollZoom: false, // Disable zooming with scroll
|
|
77
91
|
staticPlot: false, // Enable interactivity
|
|
78
92
|
};
|
|
79
|
-
return (jsxRuntime.jsx("div", { className: "plot-container", style: {
|
|
80
|
-
|
|
81
|
-
|
|
93
|
+
return (jsxRuntime.jsx(react.Suspense, { fallback: "Loading...", children: jsxRuntime.jsx("div", { className: "plot-container", style: {
|
|
94
|
+
'--selection-color': selectorsColor,
|
|
95
|
+
}, children: jsxRuntime.jsx(Plot$1, { data: plotlyData, layout: layout, config: config, onSelected: handleSelection }) }) }));
|
|
82
96
|
};
|
|
83
97
|
|
|
84
98
|
var Plot = react.lazy(function () { return import('react-plotly.js'); });
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/components/Histogram.tsx","../src/components/TestPlot.tsx"],"sourcesContent":["import React, { lazy } from 'react';\nimport { PlotParams } from 'react-plotly.js';\nimport './plotStyles.scss'; // Importing styles for the plot\n\nconst Plot = lazy(() => import('react-plotly.js'));\n\nexport type HistogramPlotProps = {\n data: number[];\n title?: string;\n xAxisTitle?: string;\n barColor?: string; // Optional prop to set the color of the bars\n unselectedBarColor?: string; // Optional prop to set the color of unselected bars\n selectorsColor?: string; // Optional prop to set the color of elements in the selection box\n}\nexport const HistogramPlot = (props: HistogramPlotProps) => {\n\n const {\n data,\n title,\n xAxisTitle,\n barColor = 'rgb(72, 72, 74)',\n unselectedBarColor = 'rgba(203, 195, 195, 0.88)',\n selectorsColor = 'black',\n } = props;\n\n const plotlyData: PlotParams['data'] = [\n {\n x: data,\n type: 'histogram',\n marker: { \n color: barColor ?? 'blue',\n line: {\n color: \"white\",\n width: 0.5,\n },\n },\n // The following property is listed in the api. Not sure why typescript doesn't know about it.\n // Styles the unselected bars in the histogram\n //@ts-ignore\n unselected: {\n marker: { \n color: unselectedBarColor,\n }\n },\n hovertemplate: '[%{x})<br>Count: %{y}<extra></extra>', // Custom hover text\n }\n ];\n\n const layout: PlotParams['layout'] = {\n title: {text: title},\n xaxis: {\n title: {\n text: xAxisTitle\n },\n // range: [Math.min(...data, 0), Math.max(...data)], // Range needs to get padding on both sides based on bin size. Consider calculating bins here.\n showgrid: true,\n zeroline: true,\n showline: true,\n mirror: 'ticks',\n gridcolor: '#efefef',\n gridwidth: 0.2,\n zerolinecolor: '#969696',\n zerolinewidth: 1,\n linecolor: '#bababa',\n linewidth: 1,\n fixedrange: true, // Disable zooming\n ticklabelposition: 'outside',\n },\n yaxis: {\n title: {\n text: 'Count'\n },\n showgrid: true,\n zeroline: true,\n showline: true,\n mirror: 'ticks',\n gridcolor: '#efefef',\n gridwidth: 0.2,\n zerolinecolor: '#969696',\n zerolinewidth: 1,\n linecolor: '#bababa',\n linewidth: 1,\n fixedrange: true, // Disable zooming\n ticksuffix: ' ', // Add space between y axis and ticks\n },\n bargap: 0.03, // Gap between bars\n dragmode: 'select'
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/components/Histogram.tsx","../src/components/TestPlot.tsx"],"sourcesContent":["import React, { lazy, Suspense } from 'react';\nimport { PlotParams } from 'react-plotly.js';\nimport './plotStyles.scss'; // Importing styles for the plot\n\nconst Plot = lazy(() => import('react-plotly.js'));\n\nexport type HistogramPlotProps = {\n data: number[];\n title?: string;\n xAxisTitle?: string;\n barColor?: string; // Optional prop to set the color of the bars\n unselectedBarColor?: string; // Optional prop to set the color of unselected bars\n selectorsColor?: string; // Optional prop to set the color of elements in the selection box\n onSelected?: (event: Plotly.PlotSelectionEvent) => void; // Optional handler for when a user clicks and drags to select an area of the plot\n onClick?: (event: Plotly.PlotMouseEvent) => void; // Optional handler for click events on the plot\n}\nexport const HistogramPlot = (props: HistogramPlotProps) => {\n\n const {\n data,\n title,\n xAxisTitle,\n barColor = 'rgb(72, 72, 74)',\n unselectedBarColor = 'rgba(203, 195, 195, 0.88)',\n selectorsColor = 'black',\n onSelected,\n onClick,\n } = props;\n\n // Combined handler for both click and selection events, so a user can choose either\n // Plotly prioritizes the selection handler over the click handler in general, so we use this strategy\n // to apply both.\n const handleSelection = (event: any) => {\n if (event.points && event.points.length === 1 && onClick) {\n // If the user clicks on or selects a single point, we'll treat it as a click.\n // Coule be improved by checking the range of the selection.\n onClick?.(event);\n } else if (event.points && event.points.length > 1) {\n // Multiple points or area - treat as selection\n onSelected?.(event);\n }\n };\n\n const plotlyData: PlotParams['data'] = [\n {\n x: data,\n type: 'histogram',\n marker: { \n color: barColor ?? 'blue',\n line: {\n color: \"white\",\n width: 0.5,\n },\n },\n // The following property is listed in the api. Not sure why typescript doesn't know about it.\n // Styles the unselected bars in the histogram\n //@ts-ignore\n unselected: {\n marker: { \n color: unselectedBarColor,\n }\n },\n hovertemplate: '[%{x})<br>Count: %{y}<extra></extra>', // Custom hover text\n }\n ];\n\n const layout: PlotParams['layout'] = {\n title: {text: title},\n xaxis: {\n title: {\n text: xAxisTitle\n },\n // range: [Math.min(...data, 0), Math.max(...data)], // Range needs to get padding on both sides based on bin size. Consider calculating bins here.\n showgrid: true,\n zeroline: true,\n showline: true,\n mirror: 'ticks',\n gridcolor: '#efefef',\n gridwidth: 0.2,\n zerolinecolor: '#969696',\n zerolinewidth: 1,\n linecolor: '#bababa',\n linewidth: 1,\n fixedrange: true, // Disable zooming\n ticklabelposition: 'outside',\n },\n yaxis: {\n title: {\n text: 'Count'\n },\n showgrid: true,\n zeroline: true,\n showline: true,\n mirror: 'ticks',\n gridcolor: '#efefef',\n gridwidth: 0.2,\n zerolinecolor: '#969696',\n zerolinewidth: 1,\n linecolor: '#bababa',\n linewidth: 1,\n fixedrange: true, // Disable zooming\n ticksuffix: ' ', // Add space between y axis and ticks\n },\n bargap: 0.03, // Gap between bars\n dragmode: 'select', // Enable selection for both click and drag\n selectdirection: 'h', // Allow selection in horizontal direction\n };\n\n const config: PlotParams['config'] = {\n responsive: true, // Make the plot responsive\n displayModeBar: false, // Hide the mode bar\n displaylogo: false, // Hide the Plotly logo\n scrollZoom: false, // Disable zooming with scroll\n staticPlot: false, // Enable interactivity\n };\n\n return (\n <Suspense fallback=\"Loading...\">\n <div \n className=\"plot-container\"\n style={{\n '--selection-color': selectorsColor,\n } as React.CSSProperties}\n >\n <Plot \n data={plotlyData} \n layout={layout} \n config={config}\n onSelected={handleSelection}\n />\n </div>\n </Suspense>\n );\n}\n\nexport default HistogramPlot;\n","// A test bar plotly plot\nimport React, { lazy } from 'react';\nimport { PlotParams } from 'react-plotly.js';\n\nconst Plot = lazy(() => import('react-plotly.js'));\n\nexport type TestPlotProps = {\n yaxisTitle?: string;\n xaxisTitle?: string;\n}\nexport const TestPlot = (props: TestPlotProps) => {\n const data: PlotParams['data'] = [\n {\n x: [1, 2, 3, 4],\n y: [10, 15, 13, 17],\n type: 'bar' as const,\n marker: { color: 'blue' },\n },\n ];\n\n const layout = {\n title: {text: 'Test Bar Plot'},\n xaxis: { title: {text: props.xaxisTitle ?? 'X Axis'} },\n yaxis: { title: {text: props.yaxisTitle ?? 'Y Axis'} },\n };\n\n return <Plot data={data} layout={layout} />;\n};\n\nexport default TestPlot;\n"],"names":["Plot","lazy","_jsx","Suspense"],"mappings":";;;;;AAIA,IAAMA,MAAI,GAAGC,UAAI,CAAC,YAAA,EAAM,OAAA,OAAO,iBAAiB,CAAC,CAAA,EAAA,CAAC;AAY3C,IAAM,aAAa,GAAG,UAAC,KAAyB,EAAA;IAGnD,IAAA,IAAI,GAQF,KAAK,CAAA,IARH,EACJ,KAAK,GAOH,KAAK,CAAA,KAPF,EACL,UAAU,GAMR,KAAK,CAAA,UANG,EACV,EAAA,GAKE,KAAK,CAAA,QALqB,EAA5B,QAAQ,GAAA,EAAA,KAAA,MAAA,GAAG,iBAAiB,GAAA,EAAA,EAC5B,EAAA,GAIE,KAAK,CAAA,kBAJyC,EAAhD,kBAAkB,GAAA,EAAA,KAAA,MAAA,GAAG,2BAA2B,GAAA,EAAA,EAChD,EAAA,GAGE,KAAK,CAAA,cAHiB,EAAxB,cAAc,GAAA,EAAA,KAAA,MAAA,GAAG,OAAO,GAAA,EAAA,EACxB,UAAU,GAER,KAAK,CAAA,UAFG,EACV,OAAO,GACL,KAAK,CAAA,OADA;;;;IAMT,IAAM,eAAe,GAAG,UAAC,KAAU,EAAA;AACjC,QAAA,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,OAAO,EAAE;;;AAGxD,YAAA,OAAO,aAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAG,KAAK,CAAC;;AACX,aAAA,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;;AAElD,YAAA,UAAU,aAAV,UAAU,KAAA,MAAA,GAAA,MAAA,GAAV,UAAU,CAAG,KAAK,CAAC;;AAEvB,KAAC;AAED,IAAA,IAAM,UAAU,GAAuB;AACrC,QAAA;AACE,YAAA,CAAC,EAAE,IAAI;AACP,YAAA,IAAI,EAAE,WAAW;AACjB,YAAA,MAAM,EAAE;AACN,gBAAA,KAAK,EAAE,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,MAAA,GAAR,QAAQ,GAAI,MAAM;AACzB,gBAAA,IAAI,EAAE;AACJ,oBAAA,KAAK,EAAE,OAAO;AACd,oBAAA,KAAK,EAAE,GAAG;AACX,iBAAA;AACF,aAAA;;;;AAID,YAAA,UAAU,EAAE;AACV,gBAAA,MAAM,EAAE;AACN,oBAAA,KAAK,EAAE,kBAAkB;AAC1B;AACF,aAAA;YACD,aAAa,EAAE,sCAAsC;AACtD;KACF;AAED,IAAA,IAAM,MAAM,GAAyB;AACnC,QAAA,KAAK,EAAE,EAAC,IAAI,EAAE,KAAK,EAAC;AACpB,QAAA,KAAK,EAAE;AACL,YAAA,KAAK,EAAE;AACL,gBAAA,IAAI,EAAE;AACP,aAAA;;AAED,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,MAAM,EAAE,OAAO;AACf,YAAA,SAAS,EAAE,SAAS;AACpB,YAAA,SAAS,EAAE,GAAG;AACd,YAAA,aAAa,EAAE,SAAS;AACxB,YAAA,aAAa,EAAE,CAAC;AAChB,YAAA,SAAS,EAAE,SAAS;AACpB,YAAA,SAAS,EAAE,CAAC;YACZ,UAAU,EAAE,IAAI;AAChB,YAAA,iBAAiB,EAAE,SAAS;AAC7B,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,KAAK,EAAE;AACL,gBAAA,IAAI,EAAE;AACP,aAAA;AACD,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,MAAM,EAAE,OAAO;AACf,YAAA,SAAS,EAAE,SAAS;AACpB,YAAA,SAAS,EAAE,GAAG;AACd,YAAA,aAAa,EAAE,SAAS;AACxB,YAAA,aAAa,EAAE,CAAC;AAChB,YAAA,SAAS,EAAE,SAAS;AACpB,YAAA,SAAS,EAAE,CAAC;YACZ,UAAU,EAAE,IAAI;YAChB,UAAU,EAAE,GAAG;AAChB,SAAA;QACD,MAAM,EAAE,IAAI;QACZ,QAAQ,EAAE,QAAQ;QAClB,eAAe,EAAE,GAAG;KACrB;AAED,IAAA,IAAM,MAAM,GAAyB;QACnC,UAAU,EAAE,IAAI;QAChB,cAAc,EAAE,KAAK;QACrB,WAAW,EAAE,KAAK;QAClB,UAAU,EAAE,KAAK;QACjB,UAAU,EAAE,KAAK;KAClB;AAED,IAAA,QACEC,cAAA,CAACC,cAAQ,EAAA,EAAC,QAAQ,EAAC,YAAY,EAAA,QAAA,EAC7BD,cAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,gBAAgB,EAC1B,KAAK,EAAE;AACL,gBAAA,mBAAmB,EAAE,cAAc;aACb,EAAA,QAAA,EAExBA,cAAA,CAACF,MAAI,EAAA,EACH,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,eAAe,EAAA,CAC3B,EAAA,CACE,EAAA,CACG;AAEf;;ACjIA,IAAM,IAAI,GAAGC,UAAI,CAAC,YAAA,EAAM,OAAA,OAAO,iBAAiB,CAAC,CAAA,EAAA,CAAC;AAM3C,IAAM,QAAQ,GAAG,UAAC,KAAoB,EAAA;;AAC3C,IAAA,IAAM,IAAI,GAAuB;AAC/B,QAAA;YACE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;YACf,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AACnB,YAAA,IAAI,EAAE,KAAc;AACpB,YAAA,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;AAC1B,SAAA;KACF;AAED,IAAA,IAAM,MAAM,GAAG;AACb,QAAA,KAAK,EAAE,EAAC,IAAI,EAAE,eAAe,EAAC;AAC9B,QAAA,KAAK,EAAE,EAAE,KAAK,EAAE,EAAC,IAAI,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,QAAQ,EAAC,EAAE;AACtD,QAAA,KAAK,EAAE,EAAE,KAAK,EAAE,EAAC,IAAI,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,QAAQ,EAAC,EAAE;KACvD;IAED,OAAOC,cAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAA,CAAI;AAC7C;;;;;"}
|