From 131e7d1f90eb7ca972c116e6cc31b45bd5d69508 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Mon, 22 Nov 2021 17:59:53 -0500 Subject: [PATCH 01/22] Add faceting story to each plot --- src/stories/plots/Barplot.stories.tsx | 63 ++++++ src/stories/plots/Boxplot.stories.tsx | 55 +++++ src/stories/plots/Heatmap.stories.tsx | 75 ++++++- src/stories/plots/Histogram.stories.tsx | 95 +++++++-- src/stories/plots/MosaicPlot.stories.tsx | 77 ++++++- src/stories/plots/PiePlot.stories.tsx | 246 ++++------------------- src/stories/plots/XYPlot.stories.tsx | 55 +++++ 7 files changed, 429 insertions(+), 237 deletions(-) diff --git a/src/stories/plots/Barplot.stories.tsx b/src/stories/plots/Barplot.stories.tsx index 1fe8d09a..fa59960d 100644 --- a/src/stories/plots/Barplot.stories.tsx +++ b/src/stories/plots/Barplot.stories.tsx @@ -1,5 +1,7 @@ import { Story, Meta } from '@storybook/react/types-6-0'; import Barplot, { BarplotProps } from '../../plots/Barplot'; +import { FacetedData, BarplotData } from '../../types/plots'; +import FacetedPlot from '../../plots/FacetedPlot'; export default { title: 'Plots/Barplot', @@ -52,3 +54,64 @@ NoDataOverlay.args = { showNoDataOverlay: true, title: 'Awesomeness of animals stratified by domestication', }; + +/** + * FACETING + */ + +const facetedData: FacetedData = { + facets: [ + { + label: 'indoors', + data: dataSet, + }, + { + label: 'outdoors', + data: dataSet, + }, + { + label: 'indoors', + data: dataSet, + }, + { + label: 'outdoors', + data: dataSet, + }, + { + label: 'indoors', + data: dataSet, + }, + { + label: 'outdoors', + }, + { + label: 'No data', + }, + ], +}; + +interface FacetedStoryProps { + data: FacetedData; + props: BarplotProps; +} + +const FacetedTemplate: Story = ({ data, props }) => ( + + data={data} + component={Barplot} + props={props} + /> +); + +export const Faceted = FacetedTemplate.bind({}); +Faceted.args = { + data: facetedData, + props: { + title: 'indoor and outdoor pets', + containerStyles: { + width: 300, + height: 300, + border: '1px solid #dadada', + }, + }, +}; diff --git a/src/stories/plots/Boxplot.stories.tsx b/src/stories/plots/Boxplot.stories.tsx index df953bda..b3cb6677 100755 --- a/src/stories/plots/Boxplot.stories.tsx +++ b/src/stories/plots/Boxplot.stories.tsx @@ -1,6 +1,8 @@ import React from 'react'; import { Meta, Story } from '@storybook/react'; import Boxplot, { BoxplotProps } from '../../plots/Boxplot'; +import { FacetedData, BoxplotData } from '../../types/plots'; +import FacetedPlot from '../../plots/FacetedPlot'; export default { title: 'Plots/Boxplot', @@ -390,3 +392,56 @@ function storyArgTypes(args: any): any { }; } } + +/** + * FACETING + */ + +const facetedData: FacetedData = { + facets: [ + { + label: 'Low income', + data: multipleData.series, + }, + { + label: 'Medium income', + data: multipleData.series, + }, + { + label: 'High income', + data: multipleData.series, + }, + { + label: 'Even higher income', + }, + { + label: 'No data', + }, + ], +}; + +interface FacetedStoryProps { + data: FacetedData; + props: BoxplotProps; +} + +const FacetedTemplate: Story = ({ data, props }) => ( + + data={data} + component={Boxplot} + props={props} + /> +); + +export const Faceted = FacetedTemplate.bind({}); +Faceted.args = { + data: facetedData, + props: { + title: 'Number of rooms (faceted)', + containerStyles: { + width: 300, + height: 300, + border: '1px solid #dadada', + }, + }, +}; diff --git a/src/stories/plots/Heatmap.stories.tsx b/src/stories/plots/Heatmap.stories.tsx index e3dd4ccc..9ddf9477 100644 --- a/src/stories/plots/Heatmap.stories.tsx +++ b/src/stories/plots/Heatmap.stories.tsx @@ -1,6 +1,8 @@ import React from 'react'; import Heatmap, { HeatmapProps } from '../../plots/Heatmap'; import { Meta, Story } from '@storybook/react'; +import { FacetedData, HeatmapData } from '../../types/plots'; +import FacetedPlot from '../../plots/FacetedPlot'; export default { title: 'Plots/Heatmap', @@ -12,17 +14,19 @@ export default { const Template: Story = (args) => ; +const numericData = { + xLabels: [1, 2, 3, 4], + yLabels: [1, 2, 3], + values: [ + [1, 20, 40, 30], + [20, 0, 60, 15], + [30, 60, 0, 50], + ], +}; + export const NumericAxes = Template.bind({}); NumericAxes.args = { - data: { - xLabels: [1, 2, 3, 4], - yLabels: [1, 2, 3], - values: [ - [1, 20, 40, 30], - [20, 0, 60, 15], - [30, 60, 0, 50], - ], - }, + data: numericData, xAxisLabel: 'Number of pets', yAxisLabel: 'Number of children', showValues: false, @@ -55,3 +59,56 @@ export const EmptyLoading = Template.bind({}); EmptyLoading.args = { showSpinner: true, }; + +/** + * FACETING + */ + +const facetedData: FacetedData = { + facets: [ + { + label: 'Kenya', + data: numericData, + }, + { + label: 'Zimbabwe', + data: numericData, + }, + { + label: 'South Africa', + data: numericData, + }, + { + label: 'Wakanda', + }, + { + label: 'No data', + }, + ], +}; + +interface FacetedStoryProps { + data: FacetedData; + props: HeatmapProps; +} + +const FacetedTemplate: Story = ({ data, props }) => ( + + data={data} + component={Heatmap} + props={props} + /> +); + +export const Faceted = FacetedTemplate.bind({}); +Faceted.args = { + data: facetedData, + props: { + title: 'Number of children vs Number of pets (faceted)', + containerStyles: { + width: 300, + height: 300, + border: '1px solid #dadada', + }, + }, +}; diff --git a/src/stories/plots/Histogram.stories.tsx b/src/stories/plots/Histogram.stories.tsx index f0ef12ac..6ece119b 100644 --- a/src/stories/plots/Histogram.stories.tsx +++ b/src/stories/plots/Histogram.stories.tsx @@ -12,7 +12,12 @@ import HistogramControls from '../../components/plotControls/HistogramControls'; import AxisRangeControl from '../../components/plotControls/AxisRangeControl'; import { binDailyCovidStats } from '../api/covidData'; import { binGithubEventDates } from '../api/githubDates'; -import { HistogramData, AxisTruncationConfig } from '../../types/plots'; +import { + HistogramData, + AxisTruncationConfig, + FacetedData, +} from '../../types/plots'; +import FacetedPlot from '../../plots/FacetedPlot'; export default { title: 'Plots/Histogram', @@ -451,24 +456,26 @@ const TemplateStaticWithRangeControls: Story = (args) => { ); }; +const staticData = { + series: [ + { + name: 'penguins', + // added 0 for testing purpose + bins: [0, 42, 11, 99, 23, 7, 9].map((num, index) => ({ + binStart: index + 1, + binEnd: index + 2, + binLabel: `${index + 1} to ${index + 2}`, + count: num, + })), + }, + ], +}; + export const StaticDataWithRangeControls = TemplateStaticWithRangeControls.bind( {} ); StaticDataWithRangeControls.args = { - data: { - series: [ - { - name: 'penguins', - // added 0 for testing purpose - bins: [0, 42, 11, 99, 23, 7, 9].map((num, index) => ({ - binStart: index + 1, - binEnd: index + 2, - binLabel: `${index + 1} to ${index + 2}`, - count: num, - })), - }, - ], - }, + data: staticData, interactive: true, }; @@ -491,3 +498,61 @@ ShowValues.args = { interactive: true, showValues: true, }; + +/** + * FACETING + */ + +const facetedData: FacetedData = { + facets: [ + { + label: 'Emperor', + data: staticData, + }, + { + label: 'Gentoo', + data: staticData, + }, + { + label: 'Rockhopper', + data: staticData, + }, + { + label: 'African', + data: staticData, + }, + { + label: 'Madagascar', + }, + { + label: 'No data', + data: staticData, + }, + ], +}; + +interface FacetedStoryProps { + data: FacetedData; + props: HistogramProps; +} + +const FacetedTemplate: Story = ({ data, props }) => ( + + data={data} + component={Histogram} + props={props} + /> +); + +export const Faceted = FacetedTemplate.bind({}); +Faceted.args = { + data: facetedData, + props: { + title: 'Penguins', + containerStyles: { + width: 300, + height: 300, + border: '1px solid #dadada', + }, + }, +}; diff --git a/src/stories/plots/MosaicPlot.stories.tsx b/src/stories/plots/MosaicPlot.stories.tsx index 687a84ef..70cc0d8d 100644 --- a/src/stories/plots/MosaicPlot.stories.tsx +++ b/src/stories/plots/MosaicPlot.stories.tsx @@ -1,6 +1,8 @@ import React from 'react'; import { Meta, Story } from '@storybook/react'; import MosaicPlot, { MosaicPlotProps } from '../../plots/MosaicPlot'; +import { FacetedData, MosaicData } from '../../types/plots'; +import FacetedPlot from '../../plots/FacetedPlot'; export default { title: 'Plots/Mosaic', @@ -47,19 +49,21 @@ TwoByThree.args = { displayLegend: false, }; +const fourByThreeData = { + values: [ + [52, 15, 35], + [15, 40, 50], + [20, 15, 7], + [22, 30, 10], + ], + independentLabels: ['Mercury', 'Venus', 'Mars'], + dependentLabels: ['Nitrogen', 'Oxygen', 'Hydrogen', 'Other'], +}; + export const FourByThree = Template.bind({}); FourByThree.args = { ...defaults, - data: { - values: [ - [52, 15, 35], - [15, 40, 50], - [20, 15, 7], - [22, 30, 10], - ], - independentLabels: ['Mercury', 'Venus', 'Mars'], - dependentLabels: ['Nitrogen', 'Oxygen', 'Hydrogen', 'Other'], - }, + data: fourByThreeData, independentAxisLabel: 'Planet', dependentAxisLabel: 'Atmospheric makeup', interactive: true, @@ -72,3 +76,56 @@ export const EmptyDataLoading = Template.bind({}); EmptyDataLoading.args = { showSpinner: true, }; + +/** + * FACETING + */ + +const facetedData: FacetedData = { + facets: [ + { + label: '10 bya', + }, + { + label: '4.5 bya', + data: fourByThreeData, + }, + { + label: '2 bya', + data: fourByThreeData, + }, + { + label: 'Today', + data: fourByThreeData, + }, + { + label: 'No data', + }, + ], +}; + +interface FacetedStoryProps { + data: FacetedData; + props: MosaicPlotProps; +} + +const FacetedTemplate: Story = ({ data, props }) => ( + + data={data} + component={MosaicPlot} + props={props} + /> +); + +export const Faceted = FacetedTemplate.bind({}); +Faceted.args = { + data: facetedData, + props: { + title: 'Atmospheric makeup of planets over time', + containerStyles: { + width: 300, + height: 300, + border: '1px solid #dadada', + }, + }, +}; diff --git a/src/stories/plots/PiePlot.stories.tsx b/src/stories/plots/PiePlot.stories.tsx index a25794b2..1f321328 100644 --- a/src/stories/plots/PiePlot.stories.tsx +++ b/src/stories/plots/PiePlot.stories.tsx @@ -156,217 +156,57 @@ EmptyLoading.args = { * FACETING */ -const facetedData: FacetedData = { - facets: [ - { - label: 'indoors', - data: { - slices: [ - { - value: 25, - label: 'dogs', - }, - { - value: 10, - label: 'cats', - }, - ], - }, - }, - { - label: 'outdoors', - data: { - slices: [ - { - value: 5, - label: 'dogs', - }, - { - value: 33, - label: 'cats', - }, - ], - }, - }, - { - label: 'indoors', - data: { - slices: [ - { - value: 25, - label: 'dogs', - }, - { - value: 10, - label: 'cats', - }, - ], - }, - }, - { - label: 'outdoors', - data: { - slices: [ - { - value: 5, - label: 'dogs', - }, - { - value: 33, - label: 'cats', - }, - ], - }, - }, - { - label: 'indoors', - data: { - slices: [ - { - value: 25, - label: 'dogs', - }, - { - value: 10, - label: 'cats', - }, - ], - }, - }, - { - label: 'outdoors', - data: { - slices: [ - { - value: 5, - label: 'dogs', - }, - { - value: 33, - label: 'cats', - }, - ], - }, - }, - { - label: 'indoors', - data: { - slices: [ - { - value: 25, - label: 'dogs', - }, - { - value: 10, - label: 'cats', - }, - ], +const facetSeries1 = { + label: 'indoors', + data: { + slices: [ + { + value: 25, + label: 'dogs', }, - }, - { - label: 'outdoors', - data: { - slices: [ - { - value: 5, - label: 'dogs', - }, - { - value: 33, - label: 'cats', - }, - ], + { + value: 10, + label: 'cats', }, - }, - { - label: 'indoors', - data: { - slices: [ - { - value: 25, - label: 'dogs', - }, - { - value: 10, - label: 'cats', - }, - ], - }, - }, - { - label: 'outdoors', - data: { - slices: [ - { - value: 5, - label: 'dogs', - }, - { - value: 33, - label: 'cats', - }, - ], - }, - }, - { - label: 'indoors', - data: { - slices: [ - { - value: 25, - label: 'dogs', - }, - { - value: 10, - label: 'cats', - }, - ], + ], + }, +}; + +const facetSeries2 = { + label: 'outdoors', + data: { + slices: [ + { + value: 5, + label: 'dogs', }, - }, - { - label: 'outdoors', - data: { - slices: [ - { - value: 5, - label: 'dogs', - }, - { - value: 33, - label: 'cats', - }, - ], + { + value: 33, + label: 'cats', }, - }, + ], + }, +}; + +const facetedData: FacetedData = { + facets: [ + facetSeries1, + facetSeries2, + facetSeries1, + facetSeries2, + facetSeries1, + facetSeries2, + facetSeries1, + facetSeries2, + facetSeries1, + facetSeries2, + facetSeries1, + facetSeries2, { label: 'indoors', - data: { - slices: [ - { - value: 25, - label: 'dogs', - }, - { - value: 10, - label: 'cats', - }, - ], - }, }, { - label: 'outdoors', - data: { - slices: [ - { - value: 5, - label: 'dogs', - }, - { - value: 33, - label: 'cats', - }, - ], - }, + label: 'No data', }, ], }; diff --git a/src/stories/plots/XYPlot.stories.tsx b/src/stories/plots/XYPlot.stories.tsx index 97bbf1c0..8d32e941 100755 --- a/src/stories/plots/XYPlot.stories.tsx +++ b/src/stories/plots/XYPlot.stories.tsx @@ -5,6 +5,8 @@ import { min, max, lte, gte } from 'lodash'; import { Story, Meta } from '@storybook/react/types-6-0'; // test to use RadioButtonGroup directly instead of XYPlotControls import RadioButtonGroup from '../../components/widgets/RadioButtonGroup'; +import { FacetedData, XYPlotData } from '../../types/plots'; +import FacetedPlot from '../../plots/FacetedPlot'; export default { title: 'Plots/XYPlot', @@ -1146,3 +1148,56 @@ function getBounds( return { yUpperValues, yLowerValues }; } + +/** + * FACETING + */ + +const facetedData: FacetedData = { + facets: [ + { + label: 'Facet 1', + data: dataSetProcess, + }, + { + label: 'Facet 2', + data: dataSetProcess, + }, + { + label: 'Facet 3', + data: dataSetProcess, + }, + { + label: 'Facet 400', + }, + { + label: 'No data', + }, + ], +}; + +interface FacetedStoryProps { + data: FacetedData; + props: XYPlotProps; +} + +const FacetedTemplate: Story = ({ data, props }) => ( + + data={data} + component={XYPlot} + props={props} + /> +); + +export const Faceted = FacetedTemplate.bind({}); +Faceted.args = { + data: facetedData, + props: { + title: 'Faceted XYPlot', + containerStyles: { + width: 300, + height: 300, + border: '1px solid #dadada', + }, + }, +}; From 22f52fdd649591a1798e8a237020b3ba379545b9 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Wed, 24 Nov 2021 15:40:08 -0500 Subject: [PATCH 02/22] Create FacetedBarplot component --- src/plots/FacetedPlot.tsx | 10 ++++++++ src/plots/facetedPlots/FacetedBarplot.tsx | 30 +++++++++++++++++++++++ 2 files changed, 40 insertions(+) create mode 100644 src/plots/facetedPlots/FacetedBarplot.tsx diff --git a/src/plots/FacetedPlot.tsx b/src/plots/FacetedPlot.tsx index a8e41567..e974a55d 100644 --- a/src/plots/FacetedPlot.tsx +++ b/src/plots/FacetedPlot.tsx @@ -11,8 +11,18 @@ import React, { import { memoize } from 'lodash'; import { FacetedData, FacetedPlotRef, PlotRef } from '../types/plots'; +import FacetedBarplot from './facetedPlots/FacetedBarplot'; +import Barplot from './Barplot'; import { PlotProps } from './PlotlyPlot'; +const mapStringToPlotComponent = (str: string) => + ({ + Barplot: { + faceted: FacetedBarplot, + unfaceted: Barplot, + }, + }[str]); + type ComponentWithPlotRef

= ComponentType< PropsWithoutRef

& RefAttributes >; diff --git a/src/plots/facetedPlots/FacetedBarplot.tsx b/src/plots/facetedPlots/FacetedBarplot.tsx new file mode 100644 index 00000000..00cda116 --- /dev/null +++ b/src/plots/facetedPlots/FacetedBarplot.tsx @@ -0,0 +1,30 @@ +import Barplot, { BarplotProps } from '../Barplot'; + +const facetedPlotContainerStyles = { + height: 300, + width: 375, + marginLeft: '0.75rem', + border: '1px solid #dedede', + boxShadow: '1px 1px 4px #00000066', +}; + +const facetedPlotSpacingOptions = { + marginRight: 10, + marginLeft: 10, + marginBotton: 10, + marginTop: 50, +}; + +const FacetedBarplot = ({ + containerStyles = facetedPlotContainerStyles, + spacingOptions = facetedPlotSpacingOptions, + ...restProps +}: BarplotProps) => ( + +); + +export default FacetedBarplot; From 9f8d027888de8e1721ab2a67308f10ca566a82e0 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Tue, 30 Nov 2021 18:25:51 -0500 Subject: [PATCH 03/22] Nonfunctional FacetedBarplot using FacetedPlot --- src/plots/FacetedPlot.tsx | 10 ------ src/plots/facetedPlots/FacetedBarplot.tsx | 37 ++++++++++++++--------- 2 files changed, 23 insertions(+), 24 deletions(-) diff --git a/src/plots/FacetedPlot.tsx b/src/plots/FacetedPlot.tsx index e974a55d..a8e41567 100644 --- a/src/plots/FacetedPlot.tsx +++ b/src/plots/FacetedPlot.tsx @@ -11,18 +11,8 @@ import React, { import { memoize } from 'lodash'; import { FacetedData, FacetedPlotRef, PlotRef } from '../types/plots'; -import FacetedBarplot from './facetedPlots/FacetedBarplot'; -import Barplot from './Barplot'; import { PlotProps } from './PlotlyPlot'; -const mapStringToPlotComponent = (str: string) => - ({ - Barplot: { - faceted: FacetedBarplot, - unfaceted: Barplot, - }, - }[str]); - type ComponentWithPlotRef

= ComponentType< PropsWithoutRef

& RefAttributes >; diff --git a/src/plots/facetedPlots/FacetedBarplot.tsx b/src/plots/facetedPlots/FacetedBarplot.tsx index 00cda116..e12ca6a0 100644 --- a/src/plots/facetedPlots/FacetedBarplot.tsx +++ b/src/plots/facetedPlots/FacetedBarplot.tsx @@ -1,6 +1,8 @@ import Barplot, { BarplotProps } from '../Barplot'; +import FacetedPlot, { FacetedPlotProps } from '../FacetedPlot'; +import { BarplotData } from '../../types/plots'; -const facetedPlotContainerStyles = { +const defaultContainerStyles: BarplotProps['containerStyles'] = { height: 300, width: 375, marginLeft: '0.75rem', @@ -8,23 +10,30 @@ const facetedPlotContainerStyles = { boxShadow: '1px 1px 4px #00000066', }; -const facetedPlotSpacingOptions = { +const defaultSpacingOptions: BarplotProps['spacingOptions'] = { marginRight: 10, marginLeft: 10, - marginBotton: 10, + marginBottom: 10, marginTop: 50, }; -const FacetedBarplot = ({ - containerStyles = facetedPlotContainerStyles, - spacingOptions = facetedPlotSpacingOptions, - ...restProps -}: BarplotProps) => ( - -); +type FacetedBarplotProps = Omit< + FacetedPlotProps, + 'component' +>; + +const FacetedBarplot = (facetedBarplotProps: FacetedBarplotProps) => { + return ( + + ); +}; export default FacetedBarplot; From 5d00b2adde9ad9b37c752c205b6713a99d67c75a Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Wed, 1 Dec 2021 13:40:55 -0500 Subject: [PATCH 04/22] Add basic functionality to expand faceted plot to modal --- package.json | 2 + src/plots/FacetedPlot.tsx | 92 +++++++-- src/plots/facetedPlots/FacetedBarplot.tsx | 30 +-- src/stories/plots/Barplot.stories.tsx | 14 +- yarn.lock | 222 +++++++++++++++++++++- 5 files changed, 320 insertions(+), 40 deletions(-) diff --git a/package.json b/package.json index b0d2efe5..9a860fa7 100644 --- a/package.json +++ b/package.json @@ -8,11 +8,13 @@ "url": "https://github.com/veupathdb/web-components.git" }, "dependencies": { + "@emotion/react": "^11.7.0", "@material-ui/core": "^4.11.2", "@material-ui/icons": "^4.11.2", "@material-ui/lab": "^4.0.0-alpha.57", "@types/d3": "^7.1.0", "@types/date-arithmetic": "^4.1.1", + "@veupathdb/core-components": "^0.2.46", "@visx/gradient": "^1.0.0", "@visx/group": "^1.0.0", "@visx/hierarchy": "^1.0.0", diff --git a/src/plots/FacetedPlot.tsx b/src/plots/FacetedPlot.tsx index a8e41567..4046eb62 100644 --- a/src/plots/FacetedPlot.tsx +++ b/src/plots/FacetedPlot.tsx @@ -6,6 +6,7 @@ import React, { forwardRef, useImperativeHandle, useRef, + useState, } from 'react'; import { memoize } from 'lodash'; @@ -13,6 +14,8 @@ import { memoize } from 'lodash'; import { FacetedData, FacetedPlotRef, PlotRef } from '../types/plots'; import { PlotProps } from './PlotlyPlot'; +import { FullScreenModal } from '@veupathdb/core-components'; + type ComponentWithPlotRef

= ComponentType< PropsWithoutRef

& RefAttributes >; @@ -21,6 +24,7 @@ export interface FacetedPlotProps> { data?: FacetedData; component: ComponentWithPlotRef

; props: P; + modalProps?: P; // custom legend prop checkedLegendItems?: string[]; } @@ -33,9 +37,12 @@ function renderFacetedPlot>( data, component: Component, props: componentProps, + modalProps: modalComponentProps, checkedLegendItems: checkedLegendItems, } = props; const plotRefs = useRef([]); + const [modalIsOpen, setModalIsOpen] = useState(false); + const [modalPlot, setModalPlot] = useState(null); useImperativeHandle( ref, @@ -60,27 +67,72 @@ function renderFacetedPlot>( overflow: 'auto', }} > - {data?.facets.map(({ data, label }, index) => ( - { - if (plotInstance == null) { - delete plotRefs.current[index]; - } else { - plotRefs.current[index] = plotInstance; - } - }} - key={index} - data={data} - title={label} - displayLegend={false} - interactive={false} - // pass checkedLegendItems to PlotlyPlot - checkedLegendItems={checkedLegendItems} - showNoDataOverlay={data == null} - /> - ))} + {data?.facets.map(({ data, label }, index) => { + const component = ( + { + if (plotInstance == null) { + delete plotRefs.current[index]; + } else { + plotRefs.current[index] = plotInstance; + } + }} + key={index} + data={data} + title={label} + displayLegend={false} + interactive={false} + // pass checkedLegendItems to PlotlyPlot + checkedLegendItems={checkedLegendItems} + showNoDataOverlay={data == null} + /> + ); + + const modalComponent = modalComponentProps && ( + { + // if (plotInstance == null) { + // delete plotRefs.current[index]; + // } else { + // plotRefs.current[index] = plotInstance; + // } + // }} + // key={index} + data={data} + title={label} + displayLegend={true} + interactive={true} + // pass checkedLegendItems to PlotlyPlot + checkedLegendItems={checkedLegendItems} + showNoDataOverlay={data == null} + /> + ); + + return modalComponentProps ? ( + + ) : ( + <>{component} + ); + })} + {modalComponentProps && ( + setModalIsOpen(false)} + > + + {modalPlot} + + )} ); } diff --git a/src/plots/facetedPlots/FacetedBarplot.tsx b/src/plots/facetedPlots/FacetedBarplot.tsx index e12ca6a0..eee588b7 100644 --- a/src/plots/facetedPlots/FacetedBarplot.tsx +++ b/src/plots/facetedPlots/FacetedBarplot.tsx @@ -22,18 +22,20 @@ type FacetedBarplotProps = Omit< 'component' >; -const FacetedBarplot = (facetedBarplotProps: FacetedBarplotProps) => { - return ( - - ); -}; +// Commented out broken code (TS error) + +// const FacetedBarplot = (facetedBarplotProps: FacetedBarplotProps) => { +// return ( +// +// ); +// }; -export default FacetedBarplot; +// export default FacetedBarplot; diff --git a/src/stories/plots/Barplot.stories.tsx b/src/stories/plots/Barplot.stories.tsx index fa59960d..7de4cd77 100644 --- a/src/stories/plots/Barplot.stories.tsx +++ b/src/stories/plots/Barplot.stories.tsx @@ -93,13 +93,19 @@ const facetedData: FacetedData = { interface FacetedStoryProps { data: FacetedData; props: BarplotProps; + modalProps: BarplotProps; } -const FacetedTemplate: Story = ({ data, props }) => ( +const FacetedTemplate: Story = ({ + data, + props, + modalProps, +}) => ( data={data} component={Barplot} props={props} + modalProps={modalProps} /> ); @@ -114,4 +120,10 @@ Faceted.args = { border: '1px solid #dadada', }, }, + modalProps: { + containerStyles: { + width: 600, + height: 400, + }, + }, }; diff --git a/yarn.lock b/yarn.lock index 66050b1c..1fea0380 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1516,6 +1516,17 @@ "@emotion/utils" "0.11.3" "@emotion/weak-memoize" "0.2.5" +"@emotion/cache@^11.6.0": + version "11.6.0" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.6.0.tgz#65fbdbbe4382f1991d8b20853c38e63ecccec9a1" + integrity sha512-ElbsWY1KMwEowkv42vGo0UPuLgtPYfIs9BxxVrmvsaJVvktknsHYYlx5NQ5g6zLDcOTyamlDc7FkRg2TAcQDKQ== + dependencies: + "@emotion/memoize" "^0.7.4" + "@emotion/sheet" "^1.1.0" + "@emotion/utils" "^1.0.0" + "@emotion/weak-memoize" "^0.2.5" + stylis "^4.0.10" + "@emotion/core@^10.0.9", "@emotion/core@^10.1.1": version "10.1.1" resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.1.1.tgz#c956c1365f2f2481960064bcb8c4732e5fb612c3" @@ -1554,6 +1565,24 @@ resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== +"@emotion/memoize@^0.7.4": + version "0.7.5" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50" + integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ== + +"@emotion/react@^11.7.0": + version "11.7.0" + resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.7.0.tgz#b179da970ac0e8415de3ac165deadf8d9c4bf89f" + integrity sha512-WL93hf9+/2s3cA1JVJlz8+Uy6p6QWukqQFOm2OZO5ki51hfucHMOmbSjiyC3t2Y4RI8XUmBoepoc/24ny/VBbA== + dependencies: + "@babel/runtime" "^7.13.10" + "@emotion/cache" "^11.6.0" + "@emotion/serialize" "^1.0.2" + "@emotion/sheet" "^1.1.0" + "@emotion/utils" "^1.0.0" + "@emotion/weak-memoize" "^0.2.5" + hoist-non-react-statics "^3.3.1" + "@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16": version "0.11.16" resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad" @@ -1565,11 +1594,27 @@ "@emotion/utils" "0.11.3" csstype "^2.5.7" +"@emotion/serialize@^1.0.2": + version "1.0.2" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965" + integrity sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A== + dependencies: + "@emotion/hash" "^0.8.0" + "@emotion/memoize" "^0.7.4" + "@emotion/unitless" "^0.7.5" + "@emotion/utils" "^1.0.0" + csstype "^3.0.2" + "@emotion/sheet@0.9.4": version "0.9.4" resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5" integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA== +"@emotion/sheet@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.1.0.tgz#56d99c41f0a1cda2726a05aa6a20afd4c63e58d2" + integrity sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g== + "@emotion/styled-base@^10.0.27": version "10.0.31" resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.31.tgz#940957ee0aa15c6974adc7d494ff19765a2f742a" @@ -1593,7 +1638,7 @@ resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== -"@emotion/unitless@0.7.5": +"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.5": version "0.7.5" resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== @@ -1603,7 +1648,12 @@ resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924" integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw== -"@emotion/weak-memoize@0.2.5": +"@emotion/utils@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af" + integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA== + +"@emotion/weak-memoize@0.2.5", "@emotion/weak-memoize@^0.2.5": version "0.2.5" resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46" integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA== @@ -1724,6 +1774,24 @@ react-is "^16.8.0 || ^17.0.0" react-transition-group "^4.4.0" +"@material-ui/core@^4.12.3": + version "4.12.3" + resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.3.tgz#80d665caf0f1f034e52355c5450c0e38b099d3ca" + integrity sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw== + dependencies: + "@babel/runtime" "^7.4.4" + "@material-ui/styles" "^4.11.4" + "@material-ui/system" "^4.12.1" + "@material-ui/types" "5.1.0" + "@material-ui/utils" "^4.11.2" + "@types/react-transition-group" "^4.2.0" + clsx "^1.0.4" + hoist-non-react-statics "^3.3.2" + popper.js "1.16.1-lts" + prop-types "^15.7.2" + react-is "^16.8.0 || ^17.0.0" + react-transition-group "^4.4.0" + "@material-ui/icons@^4.11.2": version "4.11.2" resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5" @@ -1764,6 +1832,28 @@ jss-plugin-vendor-prefixer "^10.0.3" prop-types "^15.7.2" +"@material-ui/styles@^4.11.4": + version "4.11.4" + resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.4.tgz#eb9dfccfcc2d208243d986457dff025497afa00d" + integrity sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew== + dependencies: + "@babel/runtime" "^7.4.4" + "@emotion/hash" "^0.8.0" + "@material-ui/types" "5.1.0" + "@material-ui/utils" "^4.11.2" + clsx "^1.0.4" + csstype "^2.5.2" + hoist-non-react-statics "^3.3.2" + jss "^10.5.1" + jss-plugin-camel-case "^10.5.1" + jss-plugin-default-unit "^10.5.1" + jss-plugin-global "^10.5.1" + jss-plugin-nested "^10.5.1" + jss-plugin-props-sort "^10.5.1" + jss-plugin-rule-value-function "^10.5.1" + jss-plugin-vendor-prefixer "^10.5.1" + prop-types "^15.7.2" + "@material-ui/system@^4.11.2": version "4.11.2" resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.11.2.tgz#7f0a754bba3673ed5fdbfa02fe438096c104b1f6" @@ -1774,7 +1864,17 @@ csstype "^2.5.2" prop-types "^15.7.2" -"@material-ui/types@^5.1.0": +"@material-ui/system@^4.12.1": + version "4.12.1" + resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.1.tgz#2dd96c243f8c0a331b2bb6d46efd7771a399707c" + integrity sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw== + dependencies: + "@babel/runtime" "^7.4.4" + "@material-ui/utils" "^4.11.2" + csstype "^2.5.2" + prop-types "^15.7.2" + +"@material-ui/types@5.1.0", "@material-ui/types@^5.1.0": version "5.1.0" resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2" integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A== @@ -3864,6 +3964,18 @@ resolved "https://registry.yarnpkg.com/@veupathdb/browserslist-config/-/browserslist-config-1.0.0.tgz#90ca79640ffbb195a87d4d65cd4b2f92342f8b76" integrity sha512-qfKu1z9gaaHdMgRGaZBiayuIh92ishsf14lR+Rj61CJF131XWq3+5e2VyLyOdKsYJ1EreAxgyC/0upIBEzwQJw== +"@veupathdb/core-components@^0.2.46": + version "0.2.46" + resolved "https://registry.yarnpkg.com/@veupathdb/core-components/-/core-components-0.2.46.tgz#f1fc50091e49a0d7fbdb0396402d56c7847e60f0" + integrity sha512-FjQjWyrHNNMl0r3Zn9iTHeZtquvqIHvFD0mS4C40SSDeKxwZg5lIoRmIIcXcrEE/pzyZ8A4ygKa6cVnRtgzWew== + dependencies: + "@material-ui/core" "^4.12.3" + "@material-ui/icons" "^4.11.2" + lodash "^4.17.21" + react-cool-dimensions "^2.0.7" + react-modal "^3.14.3" + react-table "^7.7.0" + "@veupathdb/eslint-config@^1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@veupathdb/eslint-config/-/eslint-config-1.0.0.tgz#40dc855b263bd3fd68f8f61508ef55b1dc163caf" @@ -7519,6 +7631,11 @@ execa@^4.1.0: signal-exit "^3.0.2" strip-final-newline "^2.0.0" +exenv@^1.2.0: + version "1.2.2" + resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d" + integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50= + expand-brackets@^2.1.4: version "2.1.4" resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622" @@ -8729,7 +8846,7 @@ hmac-drbg@^1.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: +hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -9769,6 +9886,15 @@ jss-plugin-camel-case@^10.0.3: hyphenate-style-name "^1.0.3" jss "10.5.0" +jss-plugin-camel-case@^10.5.1: + version "10.8.2" + resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.8.2.tgz#8d7f915c8115afaff8cbde08faf610ec9892fba6" + integrity sha512-2INyxR+1UdNuKf4v9It3tNfPvf7IPrtkiwzofeKuMd5D58/dxDJVUQYRVg/n460rTlHUfsEQx43hDrcxi9dSPA== + dependencies: + "@babel/runtime" "^7.3.1" + hyphenate-style-name "^1.0.3" + jss "10.8.2" + jss-plugin-default-unit@^10.0.3: version "10.5.0" resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.5.0.tgz#e9f2e89741b0118ba15d52b4c13bda2b27262373" @@ -9777,6 +9903,14 @@ jss-plugin-default-unit@^10.0.3: "@babel/runtime" "^7.3.1" jss "10.5.0" +jss-plugin-default-unit@^10.5.1: + version "10.8.2" + resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.8.2.tgz#c66f12e02e0815d911b85c02c2a979ee7b4ce69a" + integrity sha512-UZ7cwT9NFYSG+SEy7noRU50s4zifulFdjkUNKE+u6mW7vFP960+RglWjTgMfh79G6OENZmaYnjHV/gcKV4nSxg== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.8.2" + jss-plugin-global@^10.0.3: version "10.5.0" resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.5.0.tgz#eb357ccd35cb4894277fb2117a78d1e498668ad6" @@ -9785,6 +9919,14 @@ jss-plugin-global@^10.0.3: "@babel/runtime" "^7.3.1" jss "10.5.0" +jss-plugin-global@^10.5.1: + version "10.8.2" + resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.8.2.tgz#1a35632a693cf50113bcc5ffe6b51969df79c4ec" + integrity sha512-UaYMSPsYZ7s/ECGoj4KoHC2jwQd5iQ7K+FFGnCAILdQrv7hPmvM2Ydg45ThT/sH46DqktCRV2SqjRuxeBH8nRA== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.8.2" + jss-plugin-nested@^10.0.3: version "10.5.0" resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.5.0.tgz#790c506432a23a63c71ceb5044e2ac85f0958702" @@ -9794,6 +9936,15 @@ jss-plugin-nested@^10.0.3: jss "10.5.0" tiny-warning "^1.0.2" +jss-plugin-nested@^10.5.1: + version "10.8.2" + resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.8.2.tgz#79f3c7f75ea6a36ae72fe52e777035bb24d230c7" + integrity sha512-acRvuPJOb930fuYmhkJaa994EADpt8TxI63Iyg96C8FJ9T2xRyU5T6R1IYKRwUiqZo+2Sr7fdGzRTDD4uBZaMA== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.8.2" + tiny-warning "^1.0.2" + jss-plugin-props-sort@^10.0.3: version "10.5.0" resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.5.0.tgz#5bcc3bd8e68cd3e2dafb47d67db28fd5a4fcf102" @@ -9802,6 +9953,14 @@ jss-plugin-props-sort@^10.0.3: "@babel/runtime" "^7.3.1" jss "10.5.0" +jss-plugin-props-sort@^10.5.1: + version "10.8.2" + resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.8.2.tgz#e25a7471868652c394562b6dc5433dcaea7dff6f" + integrity sha512-wqdcjayKRWBZnNpLUrXvsWqh+5J5YToAQ+8HNBNw0kZxVvCDwzhK2Nx6AKs7p+5/MbAh2PLgNW5Ym/ysbVAuqQ== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.8.2" + jss-plugin-rule-value-function@^10.0.3: version "10.5.0" resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.5.0.tgz#60ee8240dfe60418e1ba4729adee893cbe9be7a3" @@ -9811,6 +9970,15 @@ jss-plugin-rule-value-function@^10.0.3: jss "10.5.0" tiny-warning "^1.0.2" +jss-plugin-rule-value-function@^10.5.1: + version "10.8.2" + resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.8.2.tgz#55354b55f1b2968a15976729968f767f02d64049" + integrity sha512-bW0EKAs+0HXpb6BKJhrn94IDdiWb0CnSluTkh0rGEgyzY/nmD1uV/Wf6KGlesGOZ9gmJzQy+9FFdxIUID1c9Ug== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.8.2" + tiny-warning "^1.0.2" + jss-plugin-vendor-prefixer@^10.0.3: version "10.5.0" resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.5.0.tgz#01f04cfff31f43f153f5d71972f5800b10a2eb84" @@ -9820,6 +9988,15 @@ jss-plugin-vendor-prefixer@^10.0.3: css-vendor "^2.0.8" jss "10.5.0" +jss-plugin-vendor-prefixer@^10.5.1: + version "10.8.2" + resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.8.2.tgz#ebb4a482642f34091e454901e21176441dd5f475" + integrity sha512-DeGv18QsSiYLSVIEB2+l0af6OToUe0JB+trpzUxyqD2QRC/5AzzDrCrYffO5AHZ81QbffYvSN/pkfZaTWpRXlg== + dependencies: + "@babel/runtime" "^7.3.1" + css-vendor "^2.0.8" + jss "10.8.2" + jss@10.5.0, jss@^10.0.3: version "10.5.0" resolved "https://registry.yarnpkg.com/jss/-/jss-10.5.0.tgz#0c2de8a29874b2dc8162ab7f34ef6573a87d9dd3" @@ -9831,6 +10008,16 @@ jss@10.5.0, jss@^10.0.3: is-in-browser "^1.1.3" tiny-warning "^1.0.2" +jss@10.8.2, jss@^10.5.1: + version "10.8.2" + resolved "https://registry.yarnpkg.com/jss/-/jss-10.8.2.tgz#4b2a30b094b924629a64928236017a52c7c97505" + integrity sha512-FkoUNxI329CKQ9OQC8L72MBF9KPf5q8mIupAJ5twU7G7XREW7ahb+7jFfrjZ4iy1qvhx1HwIWUIvkZBDnKkEdQ== + dependencies: + "@babel/runtime" "^7.3.1" + csstype "^3.0.2" + is-in-browser "^1.1.3" + tiny-warning "^1.0.2" + junk@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/junk/-/junk-3.1.0.tgz#31499098d902b7e98c5d9b9c80f43457a88abfa1" @@ -11962,6 +12149,11 @@ react-cool-dimensions@^1.1.11: resolved "https://registry.yarnpkg.com/react-cool-dimensions/-/react-cool-dimensions-1.1.11.tgz#645b20a74e9462ed192f29f1cd43805dd29ccf26" integrity sha512-x6nEAVhbiojN6nPiCA04L8LY494uqA3+5E/0lIxQ20UzLKr3ttcuETgOygH2PVKMiaCfhQ0BabmDa30sYgzIeA== +react-cool-dimensions@^2.0.7: + version "2.0.7" + resolved "https://registry.yarnpkg.com/react-cool-dimensions/-/react-cool-dimensions-2.0.7.tgz#2fe6657608f034cd7c89f149ed14e79cf1cb2d50" + integrity sha512-z1VwkAAJ5d8QybDRuYIXTE41RxGr5GYsv1bQhbOBE8cMfoZQZpcF0odL64vdgrQVzat2jayedj1GoYi80FWcbA== + react-dev-utils@^11.0.3: version "11.0.3" resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-11.0.3.tgz#b61ed499c7d74f447d4faddcc547e5e671e97c08" @@ -12106,11 +12298,21 @@ react-leaflet@^2.7.0: hoist-non-react-statics "^3.3.2" warning "^4.0.3" -react-lifecycles-compat@^3.0.4: +react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== +react-modal@^3.14.3: + version "3.14.4" + resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.14.4.tgz#2ca7e8e9a180955e5c9508c228b73167c1e6f6a3" + integrity sha512-8surmulejafYCH9wfUmFyj4UfbSJwjcgbS9gf3oOItu4Hwd6ivJyVBETI0yHRhpJKCLZMUtnhzk76wXTsNL6Qg== + dependencies: + exenv "^1.2.0" + prop-types "^15.7.2" + react-lifecycles-compat "^3.0.0" + warning "^4.0.3" + react-overlays@^4.1.0: version "4.1.1" resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-4.1.1.tgz#0060107cbe1c5171a744ccda3fbf0556d064bc5f" @@ -12189,6 +12391,11 @@ react-syntax-highlighter@^13.5.3: prismjs "^1.21.0" refractor "^3.1.0" +react-table@^7.7.0: + version "7.7.0" + resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.7.0.tgz#e2ce14d7fe3a559f7444e9ecfe8231ea8373f912" + integrity sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA== + react-textarea-autosize@^8.3.0: version "8.3.3" resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.3.tgz#f70913945369da453fd554c168f6baacd1fa04d8" @@ -13560,6 +13767,11 @@ style-to-object@0.3.0, style-to-object@^0.3.0: dependencies: inline-style-parser "0.1.1" +stylis@^4.0.10: + version "4.0.10" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240" + integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg== + supercluster@^7.0.0: version "7.1.0" resolved "https://registry.yarnpkg.com/supercluster/-/supercluster-7.1.0.tgz#f0a457426ec0ab95d69c5f03b51e049774b94479" From 46f6fcd5bb92e0eb0b7fdb854c4d0f8c45477421 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Wed, 1 Dec 2021 15:39:54 -0500 Subject: [PATCH 05/22] Faceted plot modal cleanup --- src/plots/FacetedPlot.tsx | 103 ++++++++++------------- src/stories/plots/Barplot.stories.tsx | 4 +- src/stories/plots/Boxplot.stories.tsx | 2 +- src/stories/plots/Heatmap.stories.tsx | 2 +- src/stories/plots/Histogram.stories.tsx | 2 +- src/stories/plots/MosaicPlot.stories.tsx | 2 +- src/stories/plots/PiePlot.stories.tsx | 2 +- src/stories/plots/XYPlot.stories.tsx | 2 +- 8 files changed, 53 insertions(+), 66 deletions(-) diff --git a/src/plots/FacetedPlot.tsx b/src/plots/FacetedPlot.tsx index 4046eb62..c1ab289c 100644 --- a/src/plots/FacetedPlot.tsx +++ b/src/plots/FacetedPlot.tsx @@ -23,8 +23,8 @@ type ComponentWithPlotRef

= ComponentType< export interface FacetedPlotProps> { data?: FacetedData; component: ComponentWithPlotRef

; - props: P; - modalProps?: P; + componentProps: P; + modalComponentProps?: P; // custom legend prop checkedLegendItems?: string[]; } @@ -36,9 +36,9 @@ function renderFacetedPlot>( const { data, component: Component, - props: componentProps, - modalProps: modalComponentProps, - checkedLegendItems: checkedLegendItems, + componentProps, + modalComponentProps, + checkedLegendItems, } = props; const plotRefs = useRef([]); const [modalIsOpen, setModalIsOpen] = useState(false); @@ -68,59 +68,46 @@ function renderFacetedPlot>( }} > {data?.facets.map(({ data, label }, index) => { - const component = ( - { - if (plotInstance == null) { - delete plotRefs.current[index]; - } else { - plotRefs.current[index] = plotInstance; - } - }} - key={index} - data={data} - title={label} - displayLegend={false} - interactive={false} - // pass checkedLegendItems to PlotlyPlot - checkedLegendItems={checkedLegendItems} - showNoDataOverlay={data == null} - /> - ); - - const modalComponent = modalComponentProps && ( - { - // if (plotInstance == null) { - // delete plotRefs.current[index]; - // } else { - // plotRefs.current[index] = plotInstance; - // } - // }} - // key={index} - data={data} - title={label} - displayLegend={true} - interactive={true} - // pass checkedLegendItems to PlotlyPlot - checkedLegendItems={checkedLegendItems} - showNoDataOverlay={data == null} - /> - ); - - return modalComponentProps ? ( - - ) : ( - <>{component} + const sharedProps = { + data: data, + title: label, + // pass checkedLegendItems to PlotlyPlot + checkedLegendItems: checkedLegendItems, + showNoDataOverlay: data == null, + }; + + const divProps = modalComponentProps && { + onClick: () => { + setModalPlot( + + ); + setModalIsOpen(true); + }, + style: { cursor: 'pointer' }, + title: 'Click to expand', + }; + + return ( +

+ { + if (plotInstance == null) { + delete plotRefs.current[index]; + } else { + plotRefs.current[index] = plotInstance; + } + }} + displayLegend={false} + interactive={false} + /> +
); })} diff --git a/src/stories/plots/Barplot.stories.tsx b/src/stories/plots/Barplot.stories.tsx index 7de4cd77..09021f11 100644 --- a/src/stories/plots/Barplot.stories.tsx +++ b/src/stories/plots/Barplot.stories.tsx @@ -104,8 +104,8 @@ const FacetedTemplate: Story = ({ data={data} component={Barplot} - props={props} - modalProps={modalProps} + componentProps={props} + modalComponentProps={modalProps} /> ); diff --git a/src/stories/plots/Boxplot.stories.tsx b/src/stories/plots/Boxplot.stories.tsx index b3cb6677..7578548c 100755 --- a/src/stories/plots/Boxplot.stories.tsx +++ b/src/stories/plots/Boxplot.stories.tsx @@ -429,7 +429,7 @@ const FacetedTemplate: Story = ({ data, props }) => ( data={data} component={Boxplot} - props={props} + componentProps={props} /> ); diff --git a/src/stories/plots/Heatmap.stories.tsx b/src/stories/plots/Heatmap.stories.tsx index 9ddf9477..d7620565 100644 --- a/src/stories/plots/Heatmap.stories.tsx +++ b/src/stories/plots/Heatmap.stories.tsx @@ -96,7 +96,7 @@ const FacetedTemplate: Story = ({ data, props }) => ( data={data} component={Heatmap} - props={props} + componentProps={props} /> ); diff --git a/src/stories/plots/Histogram.stories.tsx b/src/stories/plots/Histogram.stories.tsx index 6ece119b..31d9cde1 100644 --- a/src/stories/plots/Histogram.stories.tsx +++ b/src/stories/plots/Histogram.stories.tsx @@ -540,7 +540,7 @@ const FacetedTemplate: Story = ({ data, props }) => ( data={data} component={Histogram} - props={props} + componentProps={props} /> ); diff --git a/src/stories/plots/MosaicPlot.stories.tsx b/src/stories/plots/MosaicPlot.stories.tsx index 70cc0d8d..9e8992da 100644 --- a/src/stories/plots/MosaicPlot.stories.tsx +++ b/src/stories/plots/MosaicPlot.stories.tsx @@ -113,7 +113,7 @@ const FacetedTemplate: Story = ({ data, props }) => ( data={data} component={MosaicPlot} - props={props} + componentProps={props} /> ); diff --git a/src/stories/plots/PiePlot.stories.tsx b/src/stories/plots/PiePlot.stories.tsx index 1f321328..e1adbf26 100644 --- a/src/stories/plots/PiePlot.stories.tsx +++ b/src/stories/plots/PiePlot.stories.tsx @@ -220,7 +220,7 @@ const FacetedTemplate: Story = ({ data, props }) => ( data={data} component={PiePlot} - props={props} + componentProps={props} /> ); diff --git a/src/stories/plots/XYPlot.stories.tsx b/src/stories/plots/XYPlot.stories.tsx index 8d32e941..80f08fa8 100755 --- a/src/stories/plots/XYPlot.stories.tsx +++ b/src/stories/plots/XYPlot.stories.tsx @@ -1185,7 +1185,7 @@ const FacetedTemplate: Story = ({ data, props }) => ( data={data} component={XYPlot} - props={props} + componentProps={props} /> ); From 2de15e752020b256feadc426ba0582b27b0d543d Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Wed, 1 Dec 2021 15:52:00 -0500 Subject: [PATCH 06/22] Uncomment FacetedBarplot which now mysteriously works --- src/plots/facetedPlots/FacetedBarplot.tsx | 30 +++++++++++------------ src/stories/plots/Barplot.stories.tsx | 20 +++++++-------- 2 files changed, 24 insertions(+), 26 deletions(-) diff --git a/src/plots/facetedPlots/FacetedBarplot.tsx b/src/plots/facetedPlots/FacetedBarplot.tsx index eee588b7..eff48743 100644 --- a/src/plots/facetedPlots/FacetedBarplot.tsx +++ b/src/plots/facetedPlots/FacetedBarplot.tsx @@ -22,20 +22,18 @@ type FacetedBarplotProps = Omit< 'component' >; -// Commented out broken code (TS error) - -// const FacetedBarplot = (facetedBarplotProps: FacetedBarplotProps) => { -// return ( -// -// ); -// }; +const FacetedBarplot = (facetedBarplotProps: FacetedBarplotProps) => { + return ( + + ); +}; -// export default FacetedBarplot; +export default FacetedBarplot; diff --git a/src/stories/plots/Barplot.stories.tsx b/src/stories/plots/Barplot.stories.tsx index 09021f11..86635289 100644 --- a/src/stories/plots/Barplot.stories.tsx +++ b/src/stories/plots/Barplot.stories.tsx @@ -2,6 +2,7 @@ import { Story, Meta } from '@storybook/react/types-6-0'; import Barplot, { BarplotProps } from '../../plots/Barplot'; import { FacetedData, BarplotData } from '../../types/plots'; import FacetedPlot from '../../plots/FacetedPlot'; +import FacetedBarplot from '../../plots/facetedPlots/FacetedBarplot'; export default { title: 'Plots/Barplot', @@ -92,27 +93,26 @@ const facetedData: FacetedData = { interface FacetedStoryProps { data: FacetedData; - props: BarplotProps; - modalProps: BarplotProps; + componentProps: BarplotProps; + modalComponentProps: BarplotProps; } const FacetedTemplate: Story = ({ data, - props, - modalProps, + componentProps, + modalComponentProps, }) => ( - + ); export const Faceted = FacetedTemplate.bind({}); Faceted.args = { data: facetedData, - props: { + componentProps: { title: 'indoor and outdoor pets', containerStyles: { width: 300, @@ -120,7 +120,7 @@ Faceted.args = { border: '1px solid #dadada', }, }, - modalProps: { + modalComponentProps: { containerStyles: { width: 600, height: 400, From 6b545d0aaec188f0dd19d84df9eb707f66bd27f4 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Thu, 2 Dec 2021 14:34:59 -0500 Subject: [PATCH 07/22] Improve faceting modal close button --- src/plots/FacetedPlot.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/src/plots/FacetedPlot.tsx b/src/plots/FacetedPlot.tsx index c1ab289c..6941c99d 100644 --- a/src/plots/FacetedPlot.tsx +++ b/src/plots/FacetedPlot.tsx @@ -112,11 +112,20 @@ function renderFacetedPlot>( })} {modalComponentProps && ( - setModalIsOpen(false)} - > - + + {modalPlot} )} From d2291dedda31d4cb0618163f4e22b99a1446a3d3 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Thu, 2 Dec 2021 14:43:11 -0500 Subject: [PATCH 08/22] Better modal plot style in story --- src/stories/plots/Barplot.stories.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/stories/plots/Barplot.stories.tsx b/src/stories/plots/Barplot.stories.tsx index 86635289..1f89eaeb 100644 --- a/src/stories/plots/Barplot.stories.tsx +++ b/src/stories/plots/Barplot.stories.tsx @@ -122,8 +122,9 @@ Faceted.args = { }, modalComponentProps: { containerStyles: { - width: 600, - height: 400, + width: '100%', + height: '100%', + margin: 'auto', }, }, }; From 280d2445e88ead9c6ae26681f3a63c56b6f373d8 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Thu, 2 Dec 2021 14:51:28 -0500 Subject: [PATCH 09/22] Change order of props --- src/plots/FacetedPlot.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/plots/FacetedPlot.tsx b/src/plots/FacetedPlot.tsx index 6941c99d..8a26de3d 100644 --- a/src/plots/FacetedPlot.tsx +++ b/src/plots/FacetedPlot.tsx @@ -80,10 +80,10 @@ function renderFacetedPlot>( onClick: () => { setModalPlot( ); setModalIsOpen(true); @@ -95,7 +95,6 @@ function renderFacetedPlot>( return (
{ if (plotInstance == null) { @@ -106,6 +105,7 @@ function renderFacetedPlot>( }} displayLegend={false} interactive={false} + {...componentProps} />
); From 74cea42f5077459adcaf314cbc522b2d10b4a44d Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Thu, 2 Dec 2021 18:02:53 -0500 Subject: [PATCH 10/22] Add unique FacetedXPlot component for each plot --- src/components/ContingencyTable.tsx | 4 +- src/plots/FacetedPlot.tsx | 1 + src/plots/MosaicPlot.tsx | 9 ++-- src/plots/facetedPlots/FacetedBoxplot.tsx | 39 ++++++++++++++ src/plots/facetedPlots/FacetedHeatmap.tsx | 39 ++++++++++++++ src/plots/facetedPlots/FacetedHistogram.tsx | 40 ++++++++++++++ src/plots/facetedPlots/FacetedMosaicPlot.tsx | 56 ++++++++++++++++++++ src/plots/facetedPlots/FacetedPiePlot.tsx | 39 ++++++++++++++ src/plots/facetedPlots/FacetedXYPlot.tsx | 39 ++++++++++++++ src/stories/plots/Barplot.stories.tsx | 1 - src/stories/plots/Boxplot.stories.tsx | 26 ++++++--- src/stories/plots/Heatmap.stories.tsx | 27 ++++++---- src/stories/plots/Histogram.stories.tsx | 26 ++++++--- src/stories/plots/MosaicPlot.stories.tsx | 32 +++++++---- src/stories/plots/PiePlot.stories.tsx | 26 ++++++--- src/stories/plots/XYPlot.stories.tsx | 26 ++++++--- src/types/plots/index.ts | 6 +-- src/types/plots/{mosaic.ts => mosaicPlot.ts} | 2 +- 18 files changed, 379 insertions(+), 59 deletions(-) create mode 100644 src/plots/facetedPlots/FacetedBoxplot.tsx create mode 100644 src/plots/facetedPlots/FacetedHeatmap.tsx create mode 100644 src/plots/facetedPlots/FacetedHistogram.tsx create mode 100644 src/plots/facetedPlots/FacetedMosaicPlot.tsx create mode 100644 src/plots/facetedPlots/FacetedPiePlot.tsx create mode 100644 src/plots/facetedPlots/FacetedXYPlot.tsx rename src/types/plots/{mosaic.ts => mosaicPlot.ts} (85%) diff --git a/src/components/ContingencyTable.tsx b/src/components/ContingencyTable.tsx index d3807973..fc0112db 100644 --- a/src/components/ContingencyTable.tsx +++ b/src/components/ContingencyTable.tsx @@ -1,12 +1,12 @@ import { CSSProperties } from 'react'; -import { MosaicData } from '../types/plots/mosaic'; +import { MosaicPlotData } from '../types/plots/mosaicPlot'; import _ from 'lodash'; import { FacetedData } from '../types/plots'; import { isFaceted } from '../types/guards'; import Spinner from '../components/Spinner'; interface ContingencyTableProps { - data?: MosaicData | FacetedData; + data?: MosaicPlotData | FacetedData; independentVariable: string; dependentVariable: string; facetVariable?: string; diff --git a/src/plots/FacetedPlot.tsx b/src/plots/FacetedPlot.tsx index 8a26de3d..a6ee52cc 100644 --- a/src/plots/FacetedPlot.tsx +++ b/src/plots/FacetedPlot.tsx @@ -122,6 +122,7 @@ function renderFacetedPlot>( backgroundColor: 'white', cursor: 'pointer', border: 'none', + zIndex: 2000, }} > diff --git a/src/plots/MosaicPlot.tsx b/src/plots/MosaicPlot.tsx index 5bf48286..beb7a710 100644 --- a/src/plots/MosaicPlot.tsx +++ b/src/plots/MosaicPlot.tsx @@ -5,7 +5,7 @@ import { makePlotlyPlotComponent, PlotProps, } from './PlotlyPlot'; -import { MosaicData } from '../types/plots'; +import { MosaicPlotData } from '../types/plots'; import { PlotParams } from 'react-plotly.js'; import _ from 'lodash'; // util functions for handling long tick labels with ellipsis @@ -14,7 +14,7 @@ import { makeStyles } from '@material-ui/core/styles'; import { PlotSpacingDefault } from '../types/plots/addOns'; import { Layout } from 'plotly.js'; -export interface MosaicPlotProps extends PlotProps { +export interface MosaicPlotProps extends PlotProps { /** label for independent axis */ independentAxisLabel?: string; /** label for dependent axis */ @@ -24,7 +24,7 @@ export interface MosaicPlotProps extends PlotProps { showColumnLabels?: boolean; } -export const EmptyMosaicData: MosaicData = { +export const EmptyMosaicData: MosaicPlotData = { values: [[]], independentLabels: [], dependentLabels: [], @@ -127,11 +127,12 @@ const MosaicPlot = makePlotlyPlotComponent( maxIndependentTickLabelLength ); // Subtraction at end is due to x-axis automargin shrinking the plot - const plotHeight = + let plotHeight = containerHeight - marginTop - marginBottom - 5 * longestIndependentTickLabelLength; + if (!independentAxisLabel) plotHeight -= 20; // Calculate the legend trace group gap accordingly legendTraceGroupGap = ((plotHeight - defaultLegendItemHeight * data.dependentLabels.length) * diff --git a/src/plots/facetedPlots/FacetedBoxplot.tsx b/src/plots/facetedPlots/FacetedBoxplot.tsx new file mode 100644 index 00000000..07ae395c --- /dev/null +++ b/src/plots/facetedPlots/FacetedBoxplot.tsx @@ -0,0 +1,39 @@ +import Boxplot, { BoxplotProps } from '../Boxplot'; +import FacetedPlot, { FacetedPlotProps } from '../FacetedPlot'; +import { BoxplotData } from '../../types/plots'; + +const defaultContainerStyles: BoxplotProps['containerStyles'] = { + height: 300, + width: 375, + marginLeft: '0.75rem', + border: '1px solid #dedede', + boxShadow: '1px 1px 4px #00000066', +}; + +const defaultSpacingOptions: BoxplotProps['spacingOptions'] = { + marginRight: 15, + marginLeft: 15, + marginBottom: 10, + marginTop: 50, +}; + +type FacetedBoxplotProps = Omit< + FacetedPlotProps, + 'component' +>; + +const FacetedBoxplot = (facetedBoxplotProps: FacetedBoxplotProps) => { + return ( + + ); +}; + +export default FacetedBoxplot; diff --git a/src/plots/facetedPlots/FacetedHeatmap.tsx b/src/plots/facetedPlots/FacetedHeatmap.tsx new file mode 100644 index 00000000..a17c5cb8 --- /dev/null +++ b/src/plots/facetedPlots/FacetedHeatmap.tsx @@ -0,0 +1,39 @@ +import Heatmap, { HeatmapProps } from '../Heatmap'; +import FacetedPlot, { FacetedPlotProps } from '../FacetedPlot'; +import { HeatmapData } from '../../types/plots'; + +const defaultContainerStyles: HeatmapProps['containerStyles'] = { + height: 300, + width: 375, + marginLeft: '0.75rem', + border: '1px solid #dedede', + boxShadow: '1px 1px 4px #00000066', +}; + +const defaultSpacingOptions: HeatmapProps['spacingOptions'] = { + marginRight: 10, + marginLeft: 25, + marginBottom: 40, + marginTop: 80, +}; + +type FacetedHeatmapProps = Omit< + FacetedPlotProps, + 'component' +>; + +const FacetedHeatmap = (facetedHeatmapProps: FacetedHeatmapProps) => { + return ( + + ); +}; + +export default FacetedHeatmap; diff --git a/src/plots/facetedPlots/FacetedHistogram.tsx b/src/plots/facetedPlots/FacetedHistogram.tsx new file mode 100644 index 00000000..214540b3 --- /dev/null +++ b/src/plots/facetedPlots/FacetedHistogram.tsx @@ -0,0 +1,40 @@ +import Histogram, { HistogramProps } from '../Histogram'; +import FacetedPlot, { FacetedPlotProps } from '../FacetedPlot'; +import { HistogramData } from '../../types/plots'; + +const defaultContainerStyles: HistogramProps['containerStyles'] = { + height: 300, + width: 375, + marginLeft: '0.75rem', + marginBottom: '.5em', + border: '1px solid #dedede', + boxShadow: '1px 1px 4px #00000066', +}; + +const defaultSpacingOptions: HistogramProps['spacingOptions'] = { + marginRight: 10, + marginLeft: 10, + marginBottom: 10, + marginTop: 50, +}; + +type FacetedHistogramProps = Omit< + FacetedPlotProps, + 'component' +>; + +const FacetedHistogram = (facetedHistogramProps: FacetedHistogramProps) => { + return ( + + ); +}; + +export default FacetedHistogram; diff --git a/src/plots/facetedPlots/FacetedMosaicPlot.tsx b/src/plots/facetedPlots/FacetedMosaicPlot.tsx new file mode 100644 index 00000000..41ddd3ff --- /dev/null +++ b/src/plots/facetedPlots/FacetedMosaicPlot.tsx @@ -0,0 +1,56 @@ +import MosaicPlot, { MosaicPlotProps } from '../MosaicPlot'; +import FacetedPlot, { FacetedPlotProps } from '../FacetedPlot'; +import { MosaicPlotData } from '../../types/plots'; + +/** What to do with these? */ +// const statsTableStyles = { +// width: plotContainerStyles.width, +// }; + +// const facetedStatsTableStyles = {}; + +// const facetedStatsTableContainerStyles = { +// display: 'grid', +// gridAutoFlow: 'column', +// gridAutoColumns: 'max-content', +// alignItems: 'flex-start', +// width: '100%', +// overflow: 'auto', +// gap: '0.5em', +// }; + +const defaultContainerStyles: MosaicPlotProps['containerStyles'] = { + height: 360, + width: 750 / 1.45, + marginLeft: '0.75rem', + border: '1px solid #dedede', + boxShadow: '1px 1px 4px #00000066', +}; + +const defaultSpacingOptions: MosaicPlotProps['spacingOptions'] = { + marginRight: 15, + marginLeft: 15, + marginBottom: 10, + marginTop: 50, +}; + +type FacetedMosaicPlotProps = Omit< + FacetedPlotProps, + 'component' +>; + +const FacetedMosaicPlot = (facetedMosaicPlotProps: FacetedMosaicPlotProps) => { + return ( + + ); +}; + +export default FacetedMosaicPlot; diff --git a/src/plots/facetedPlots/FacetedPiePlot.tsx b/src/plots/facetedPlots/FacetedPiePlot.tsx new file mode 100644 index 00000000..d679d395 --- /dev/null +++ b/src/plots/facetedPlots/FacetedPiePlot.tsx @@ -0,0 +1,39 @@ +import PiePlot, { PiePlotProps } from '../PiePlot'; +import FacetedPlot, { FacetedPlotProps } from '../FacetedPlot'; +import { PiePlotData } from '../../types/plots'; + +const defaultContainerStyles: PiePlotProps['containerStyles'] = { + height: 300, + width: 375, + marginLeft: '0.75rem', + border: '1px solid #dedede', + boxShadow: '1px 1px 4px #00000066', +}; + +const defaultSpacingOptions: PiePlotProps['spacingOptions'] = { + marginRight: 10, + marginLeft: 10, + marginBottom: 10, + marginTop: 50, +}; + +type FacetedPiePlotProps = Omit< + FacetedPlotProps, + 'component' +>; + +const FacetedPiePlot = (facetedPiePlotProps: FacetedPiePlotProps) => { + return ( + + ); +}; + +export default FacetedPiePlot; diff --git a/src/plots/facetedPlots/FacetedXYPlot.tsx b/src/plots/facetedPlots/FacetedXYPlot.tsx new file mode 100644 index 00000000..243b7eaa --- /dev/null +++ b/src/plots/facetedPlots/FacetedXYPlot.tsx @@ -0,0 +1,39 @@ +import XYPlot, { XYPlotProps } from '../XYPlot'; +import FacetedPlot, { FacetedPlotProps } from '../FacetedPlot'; +import { XYPlotData } from '../../types/plots'; + +const defaultContainerStyles: XYPlotProps['containerStyles'] = { + height: 300, + width: 750 / 1.75, + marginLeft: '0.75rem', + border: '1px solid #dedede', + boxShadow: '1px 1px 4px #00000066', +}; + +const defaultSpacingOptions: XYPlotProps['spacingOptions'] = { + marginRight: 20, + marginLeft: 50, + marginBottom: 40, + marginTop: 30, +}; + +type FacetedXYPlotProps = Omit< + FacetedPlotProps, + 'component' +>; + +const FacetedXYPlot = (facetedXYPlotProps: FacetedXYPlotProps) => { + return ( + + ); +}; + +export default FacetedXYPlot; diff --git a/src/stories/plots/Barplot.stories.tsx b/src/stories/plots/Barplot.stories.tsx index 1f89eaeb..f5adb3a9 100644 --- a/src/stories/plots/Barplot.stories.tsx +++ b/src/stories/plots/Barplot.stories.tsx @@ -1,7 +1,6 @@ import { Story, Meta } from '@storybook/react/types-6-0'; import Barplot, { BarplotProps } from '../../plots/Barplot'; import { FacetedData, BarplotData } from '../../types/plots'; -import FacetedPlot from '../../plots/FacetedPlot'; import FacetedBarplot from '../../plots/facetedPlots/FacetedBarplot'; export default { diff --git a/src/stories/plots/Boxplot.stories.tsx b/src/stories/plots/Boxplot.stories.tsx index 7578548c..cd2d67df 100755 --- a/src/stories/plots/Boxplot.stories.tsx +++ b/src/stories/plots/Boxplot.stories.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Meta, Story } from '@storybook/react'; import Boxplot, { BoxplotProps } from '../../plots/Boxplot'; import { FacetedData, BoxplotData } from '../../types/plots'; -import FacetedPlot from '../../plots/FacetedPlot'; +import FacetedBoxplot from '../../plots/facetedPlots/FacetedBoxplot'; export default { title: 'Plots/Boxplot', @@ -422,21 +422,26 @@ const facetedData: FacetedData = { interface FacetedStoryProps { data: FacetedData; - props: BoxplotProps; + componentProps: BoxplotProps; + modalComponentProps: BoxplotProps; } -const FacetedTemplate: Story = ({ data, props }) => ( - +const FacetedTemplate: Story = ({ + data, + componentProps, + modalComponentProps, +}) => ( + ); export const Faceted = FacetedTemplate.bind({}); Faceted.args = { data: facetedData, - props: { + componentProps: { title: 'Number of rooms (faceted)', containerStyles: { width: 300, @@ -444,4 +449,11 @@ Faceted.args = { border: '1px solid #dadada', }, }, + modalComponentProps: { + containerStyles: { + width: '100%', + height: '100%', + margin: 'auto', + }, + }, }; diff --git a/src/stories/plots/Heatmap.stories.tsx b/src/stories/plots/Heatmap.stories.tsx index d7620565..764b446a 100644 --- a/src/stories/plots/Heatmap.stories.tsx +++ b/src/stories/plots/Heatmap.stories.tsx @@ -2,7 +2,7 @@ import React from 'react'; import Heatmap, { HeatmapProps } from '../../plots/Heatmap'; import { Meta, Story } from '@storybook/react'; import { FacetedData, HeatmapData } from '../../types/plots'; -import FacetedPlot from '../../plots/FacetedPlot'; +import FacetedHeatmap from '../../plots/facetedPlots/FacetedHeatmap'; export default { title: 'Plots/Heatmap', @@ -89,26 +89,33 @@ const facetedData: FacetedData = { interface FacetedStoryProps { data: FacetedData; - props: HeatmapProps; + componentProps: HeatmapProps; + modalComponentProps: HeatmapProps; } -const FacetedTemplate: Story = ({ data, props }) => ( - +const FacetedTemplate: Story = ({ + data, + componentProps, + modalComponentProps, +}) => ( + ); export const Faceted = FacetedTemplate.bind({}); Faceted.args = { data: facetedData, - props: { + componentProps: { title: 'Number of children vs Number of pets (faceted)', + }, + modalComponentProps: { containerStyles: { - width: 300, - height: 300, - border: '1px solid #dadada', + width: '100%', + height: '100%', + margin: 'auto', }, }, }; diff --git a/src/stories/plots/Histogram.stories.tsx b/src/stories/plots/Histogram.stories.tsx index 31d9cde1..ff026400 100644 --- a/src/stories/plots/Histogram.stories.tsx +++ b/src/stories/plots/Histogram.stories.tsx @@ -17,7 +17,7 @@ import { AxisTruncationConfig, FacetedData, } from '../../types/plots'; -import FacetedPlot from '../../plots/FacetedPlot'; +import FacetedHistogram from '../../plots/facetedPlots/FacetedHistogram'; export default { title: 'Plots/Histogram', @@ -533,21 +533,26 @@ const facetedData: FacetedData = { interface FacetedStoryProps { data: FacetedData; - props: HistogramProps; + componentProps: HistogramProps; + modalComponentProps: HistogramProps; } -const FacetedTemplate: Story = ({ data, props }) => ( - +const FacetedTemplate: Story = ({ + data, + componentProps, + modalComponentProps, +}) => ( + ); export const Faceted = FacetedTemplate.bind({}); Faceted.args = { data: facetedData, - props: { + componentProps: { title: 'Penguins', containerStyles: { width: 300, @@ -555,4 +560,11 @@ Faceted.args = { border: '1px solid #dadada', }, }, + modalComponentProps: { + containerStyles: { + width: '100%', + height: '100%', + margin: 'auto', + }, + }, }; diff --git a/src/stories/plots/MosaicPlot.stories.tsx b/src/stories/plots/MosaicPlot.stories.tsx index 9e8992da..222dae34 100644 --- a/src/stories/plots/MosaicPlot.stories.tsx +++ b/src/stories/plots/MosaicPlot.stories.tsx @@ -1,8 +1,8 @@ import React from 'react'; import { Meta, Story } from '@storybook/react'; import MosaicPlot, { MosaicPlotProps } from '../../plots/MosaicPlot'; -import { FacetedData, MosaicData } from '../../types/plots'; -import FacetedPlot from '../../plots/FacetedPlot'; +import { FacetedData, MosaicPlotData } from '../../types/plots'; +import FacetedMosaicPlot from '../../plots/facetedPlots/FacetedMosaicPlot'; export default { title: 'Plots/Mosaic', @@ -81,7 +81,7 @@ EmptyDataLoading.args = { * FACETING */ -const facetedData: FacetedData = { +const facetedData: FacetedData = { facets: [ { label: '10 bya', @@ -105,22 +105,27 @@ const facetedData: FacetedData = { }; interface FacetedStoryProps { - data: FacetedData; - props: MosaicPlotProps; + data: FacetedData; + componentProps: MosaicPlotProps; + modalComponentProps: MosaicPlotProps; } -const FacetedTemplate: Story = ({ data, props }) => ( - +const FacetedTemplate: Story = ({ + data, + componentProps, + modalComponentProps, +}) => ( + ); export const Faceted = FacetedTemplate.bind({}); Faceted.args = { data: facetedData, - props: { + componentProps: { title: 'Atmospheric makeup of planets over time', containerStyles: { width: 300, @@ -128,4 +133,11 @@ Faceted.args = { border: '1px solid #dadada', }, }, + modalComponentProps: { + containerStyles: { + width: '100%', + height: '100%', + margin: 'auto', + }, + }, }; diff --git a/src/stories/plots/PiePlot.stories.tsx b/src/stories/plots/PiePlot.stories.tsx index e1adbf26..506398e4 100644 --- a/src/stories/plots/PiePlot.stories.tsx +++ b/src/stories/plots/PiePlot.stories.tsx @@ -2,7 +2,7 @@ import { Story } from '@storybook/react/types-6-0'; import PiePlot, { PiePlotProps } from '../../plots/PiePlot'; import { FacetedData, PiePlotData } from '../../types/plots'; -import FacetedPlot from '../../plots/FacetedPlot'; +import FacetedPiePlot from '../../plots/facetedPlots/FacetedPiePlot'; import { DARK_GRAY, DARK_GREEN, @@ -213,21 +213,26 @@ const facetedData: FacetedData = { interface FacetedStoryProps { data: FacetedData; - props: PiePlotProps; + componentProps: PiePlotProps; + modalComponentProps: PiePlotProps; } -const FacetedTemplate: Story = ({ data, props }) => ( - +const FacetedTemplate: Story = ({ + data, + componentProps, + modalComponentProps, +}) => ( + ); export const Faceted = FacetedTemplate.bind({}); Faceted.args = { data: facetedData, - props: { + componentProps: { title: 'indoor and outdoor pets', containerStyles: { width: 300, @@ -235,4 +240,11 @@ Faceted.args = { border: '1px solid #dadada', }, }, + modalComponentProps: { + containerStyles: { + width: '100%', + height: '100%', + margin: 'auto', + }, + }, }; diff --git a/src/stories/plots/XYPlot.stories.tsx b/src/stories/plots/XYPlot.stories.tsx index 80f08fa8..e2b51aaf 100755 --- a/src/stories/plots/XYPlot.stories.tsx +++ b/src/stories/plots/XYPlot.stories.tsx @@ -6,7 +6,7 @@ import { Story, Meta } from '@storybook/react/types-6-0'; // test to use RadioButtonGroup directly instead of XYPlotControls import RadioButtonGroup from '../../components/widgets/RadioButtonGroup'; import { FacetedData, XYPlotData } from '../../types/plots'; -import FacetedPlot from '../../plots/FacetedPlot'; +import FacetedXYPlot from '../../plots/facetedPlots/FacetedXYPlot'; export default { title: 'Plots/XYPlot', @@ -1178,21 +1178,26 @@ const facetedData: FacetedData = { interface FacetedStoryProps { data: FacetedData; - props: XYPlotProps; + componentProps: XYPlotProps; + modalComponentProps: XYPlotProps; } -const FacetedTemplate: Story = ({ data, props }) => ( - +const FacetedTemplate: Story = ({ + data, + componentProps, + modalComponentProps, +}) => ( + ); export const Faceted = FacetedTemplate.bind({}); Faceted.args = { data: facetedData, - props: { + componentProps: { title: 'Faceted XYPlot', containerStyles: { width: 300, @@ -1200,4 +1205,11 @@ Faceted.args = { border: '1px solid #dadada', }, }, + modalComponentProps: { + containerStyles: { + width: '100%', + height: '100%', + margin: 'auto', + }, + }, }; diff --git a/src/types/plots/index.ts b/src/types/plots/index.ts index fb9d36d4..3c078534 100644 --- a/src/types/plots/index.ts +++ b/src/types/plots/index.ts @@ -10,7 +10,7 @@ import { BoxplotData } from './boxplot'; import { XYPlotData } from './xyplot'; import { BarplotData } from './barplot'; import { HeatmapData } from './heatmap'; -import { MosaicData } from './mosaic'; +import { MosaicPlotData } from './mosaicPlot'; import { BirdsEyePlotData } from './birdseyeplot'; /** @@ -43,7 +43,7 @@ export type UnionOfPlotDataTypes = | XYPlotData | BarplotData | HeatmapData - | MosaicData + | MosaicPlotData | BirdsEyePlotData; export * from './addOns'; @@ -55,5 +55,5 @@ export * from './boxplot'; export * from './xyplot'; export * from './barplot'; export * from './heatmap'; -export * from './mosaic'; +export * from './mosaicPlot'; export * from './birdseyeplot'; diff --git a/src/types/plots/mosaic.ts b/src/types/plots/mosaicPlot.ts similarity index 85% rename from src/types/plots/mosaic.ts rename to src/types/plots/mosaicPlot.ts index 1527e29f..fe5f4d7c 100644 --- a/src/types/plots/mosaic.ts +++ b/src/types/plots/mosaicPlot.ts @@ -1,4 +1,4 @@ -export type MosaicData = { +export type MosaicPlotData = { // N columns, M rows values: Array>; // MxN (M = outerLength; N = innerLength) independentLabels: Array; // N From 672b2cce02bd2ff587bc02d9cce9aea357d24689 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Thu, 2 Dec 2021 20:22:05 -0500 Subject: [PATCH 11/22] Fix faceting plot titles bug --- src/plots/FacetedPlot.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/plots/FacetedPlot.tsx b/src/plots/FacetedPlot.tsx index a6ee52cc..fd2f6cab 100644 --- a/src/plots/FacetedPlot.tsx +++ b/src/plots/FacetedPlot.tsx @@ -70,13 +70,12 @@ function renderFacetedPlot>( {data?.facets.map(({ data, label }, index) => { const sharedProps = { data: data, - title: label, // pass checkedLegendItems to PlotlyPlot checkedLegendItems: checkedLegendItems, showNoDataOverlay: data == null, }; - const divProps = modalComponentProps && { + const divModalProps = modalComponentProps && { onClick: () => { setModalPlot( >( displayLegend={true} interactive={true} {...modalComponentProps} + title={label} /> ); setModalIsOpen(true); @@ -93,7 +93,7 @@ function renderFacetedPlot>( }; return ( -
+
{ @@ -106,6 +106,7 @@ function renderFacetedPlot>( displayLegend={false} interactive={false} {...componentProps} + title={label} />
); From 3d092eb1fa883445771b1951d4e6c7dededfa655 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Fri, 3 Dec 2021 12:12:07 -0500 Subject: [PATCH 12/22] Fix pointer cursor bug --- src/plots/FacetedPlot.tsx | 10 ++++++++-- src/stories/plots/Boxplot.stories.tsx | 9 +-------- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/plots/FacetedPlot.tsx b/src/plots/FacetedPlot.tsx index fd2f6cab..3d931986 100644 --- a/src/plots/FacetedPlot.tsx +++ b/src/plots/FacetedPlot.tsx @@ -88,12 +88,18 @@ function renderFacetedPlot>( ); setModalIsOpen(true); }, - style: { cursor: 'pointer' }, title: 'Click to expand', }; return ( -
+
{ diff --git a/src/stories/plots/Boxplot.stories.tsx b/src/stories/plots/Boxplot.stories.tsx index cd2d67df..92394348 100755 --- a/src/stories/plots/Boxplot.stories.tsx +++ b/src/stories/plots/Boxplot.stories.tsx @@ -423,7 +423,7 @@ const facetedData: FacetedData = { interface FacetedStoryProps { data: FacetedData; componentProps: BoxplotProps; - modalComponentProps: BoxplotProps; + modalComponentProps?: BoxplotProps; } const FacetedTemplate: Story = ({ @@ -449,11 +449,4 @@ Faceted.args = { border: '1px solid #dadada', }, }, - modalComponentProps: { - containerStyles: { - width: '100%', - height: '100%', - margin: 'auto', - }, - }, }; From 3575d2b0b6e4c35ba81ef96d5874eb50cb578f72 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Mon, 6 Dec 2021 17:49:34 -0500 Subject: [PATCH 13/22] Fix faceted pie plot click bug --- src/plots/PiePlot.tsx | 17 +++++++++++++++++ src/plots/PlotlyPlot.tsx | 21 +++++++++++++++++---- 2 files changed, 34 insertions(+), 4 deletions(-) diff --git a/src/plots/PiePlot.tsx b/src/plots/PiePlot.tsx index e2050d7d..84a988de 100644 --- a/src/plots/PiePlot.tsx +++ b/src/plots/PiePlot.tsx @@ -5,6 +5,8 @@ import { makePlotlyPlotComponent, PlotProps } from './PlotlyPlot'; // isn't PlotlyPlotData the same as PlotParams['data'] ? import { PiePlotData, PiePlotDatum } from '../types/plots'; +import { useCallback } from 'react'; +import { select } from 'd3'; // Plotly PlotData['hoverinfo'] definition lacks options that work // for pie traces. These can be found in PlotData['textinfo'] @@ -153,12 +155,27 @@ const PiePlot = makePlotlyPlotComponent( newData.push(primaryDataTrace); + const onPlotlyRender = useCallback((_, graphDiv) => { + const parentNode = select(graphDiv).select('g.trace'); + const sliceNodes = parentNode.selectAll('g.slice'); + sliceNodes.each(function () { + const sliceNode = select(this); + const clone = sliceNode.clone(true); + parentNode.insert( + () => clone.node(), + () => this + ); + sliceNode.remove(); + }); + }, []); + return { // Type definitions from Plot.ly library are out of date. See redefinition of PlotData above. // In order to avoid Typescript barfing, we have to perform this // casting. data: newData as PlotlyPlotData[], layout, + onPlotlyRender: onPlotlyRender, ...restProps, }; } diff --git a/src/plots/PlotlyPlot.tsx b/src/plots/PlotlyPlot.tsx index 26c79107..9bc1e42b 100644 --- a/src/plots/PlotlyPlot.tsx +++ b/src/plots/PlotlyPlot.tsx @@ -59,6 +59,8 @@ export interface PlotProps extends ColorPaletteAddon { storedIndependentAxisTickLabel?: string[]; /** list of checked legend items via checkbox input */ checkedLegendItems?: string[]; + /** A function to call each time after plotly renders the plot */ + onPlotlyRender?: PlotParams['onUpdate']; } const Plot = lazy(() => import('react-plotly.js')); @@ -99,6 +101,7 @@ function PlotlyPlot( storedIndependentAxisTickLabel, checkedLegendItems, colorPalette = ColorPaletteDefault, + onPlotlyRender, ...plotlyProps } = props; @@ -202,8 +205,9 @@ function PlotlyPlot( ); // ellipsis with tooltip for legend, legend title, and independent axis tick labels - const onUpdate = useCallback( - (_, graphDiv: Readonly) => { + const onRender = useCallback( + (figure, graphDiv: Readonly) => { + onPlotlyRender && onPlotlyRender(figure, graphDiv); // legend tooltip // remove pre-existing title to avoid duplicates select(graphDiv) @@ -291,6 +295,7 @@ function PlotlyPlot( } }, [ + onPlotlyRender, storedLegendList, legendTitle, maxLegendTitleTextLength, @@ -299,6 +304,14 @@ function PlotlyPlot( ] ); + const onInitialized = useCallback( + (figure, graphDiv: Readonly) => { + onRender(figure, graphDiv); + sharedPlotCreation.run(); + }, + [onRender, sharedPlotCreation.run] + ); + const finalData = useMemo(() => { return data.map((d) => ({ ...d, @@ -352,8 +365,8 @@ function PlotlyPlot( style={{ width: '100%', height: '100%' }} config={finalConfig} // use onUpdate event handler for legend tooltip - onUpdate={onUpdate} - onInitialized={sharedPlotCreation.run} + onUpdate={onRender} + onInitialized={onInitialized} /> {showNoDataOverlay && (
Date: Mon, 6 Dec 2021 18:03:06 -0500 Subject: [PATCH 14/22] Move pie plot onPlotlyRender call to FacetedPiePlot --- src/plots/PiePlot.tsx | 17 ----------------- src/plots/facetedPlots/FacetedPiePlot.tsx | 20 ++++++++++++++++++++ 2 files changed, 20 insertions(+), 17 deletions(-) diff --git a/src/plots/PiePlot.tsx b/src/plots/PiePlot.tsx index 84a988de..e2050d7d 100644 --- a/src/plots/PiePlot.tsx +++ b/src/plots/PiePlot.tsx @@ -5,8 +5,6 @@ import { makePlotlyPlotComponent, PlotProps } from './PlotlyPlot'; // isn't PlotlyPlotData the same as PlotParams['data'] ? import { PiePlotData, PiePlotDatum } from '../types/plots'; -import { useCallback } from 'react'; -import { select } from 'd3'; // Plotly PlotData['hoverinfo'] definition lacks options that work // for pie traces. These can be found in PlotData['textinfo'] @@ -155,27 +153,12 @@ const PiePlot = makePlotlyPlotComponent( newData.push(primaryDataTrace); - const onPlotlyRender = useCallback((_, graphDiv) => { - const parentNode = select(graphDiv).select('g.trace'); - const sliceNodes = parentNode.selectAll('g.slice'); - sliceNodes.each(function () { - const sliceNode = select(this); - const clone = sliceNode.clone(true); - parentNode.insert( - () => clone.node(), - () => this - ); - sliceNode.remove(); - }); - }, []); - return { // Type definitions from Plot.ly library are out of date. See redefinition of PlotData above. // In order to avoid Typescript barfing, we have to perform this // casting. data: newData as PlotlyPlotData[], layout, - onPlotlyRender: onPlotlyRender, ...restProps, }; } diff --git a/src/plots/facetedPlots/FacetedPiePlot.tsx b/src/plots/facetedPlots/FacetedPiePlot.tsx index d679d395..58612ebf 100644 --- a/src/plots/facetedPlots/FacetedPiePlot.tsx +++ b/src/plots/facetedPlots/FacetedPiePlot.tsx @@ -1,6 +1,8 @@ import PiePlot, { PiePlotProps } from '../PiePlot'; import FacetedPlot, { FacetedPlotProps } from '../FacetedPlot'; import { PiePlotData } from '../../types/plots'; +import { useCallback } from 'react'; +import { select } from 'd3'; const defaultContainerStyles: PiePlotProps['containerStyles'] = { height: 300, @@ -23,6 +25,23 @@ type FacetedPiePlotProps = Omit< >; const FacetedPiePlot = (facetedPiePlotProps: FacetedPiePlotProps) => { + const onPlotlyRender = useCallback((_, graphDiv) => { + // Replace each slice DOM node with a copy of itself. + // This removes the existing click event handler, which + // otherwise blocks the click handler that opens the modal + const parentNode = select(graphDiv).select('g.trace'); + const sliceNodes = parentNode.selectAll('g.slice'); + sliceNodes.each(function () { + const sliceNode = select(this); + const clone = sliceNode.clone(true); + parentNode.insert( + () => clone.node(), + () => this + ); + sliceNode.remove(); + }); + }, []); + return ( { componentProps={{ containerStyles: defaultContainerStyles, spacingOptions: defaultSpacingOptions, + onPlotlyRender, ...facetedPiePlotProps.componentProps, }} /> From 282e6959257ac2ab9c1ec02c1c484bc45cc23eef Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Mon, 6 Dec 2021 20:55:00 -0500 Subject: [PATCH 15/22] Add comment --- src/plots/FacetedPlot.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/plots/FacetedPlot.tsx b/src/plots/FacetedPlot.tsx index 3d931986..dfb8f67d 100644 --- a/src/plots/FacetedPlot.tsx +++ b/src/plots/FacetedPlot.tsx @@ -24,6 +24,9 @@ export interface FacetedPlotProps> { data?: FacetedData; component: ComponentWithPlotRef

; componentProps: P; + /** Provide modalComponentProps to activate click-to-expand + * These are the props the expanded plot inside the modal will receive + */ modalComponentProps?: P; // custom legend prop checkedLegendItems?: string[]; From 51185dd9847c35ec23592e96d762668945f2c623 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Tue, 7 Dec 2021 16:18:23 -0500 Subject: [PATCH 16/22] Change a couple of default faceted plot styles --- src/plots/facetedPlots/FacetedHeatmap.tsx | 2 +- src/plots/facetedPlots/FacetedXYPlot.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/plots/facetedPlots/FacetedHeatmap.tsx b/src/plots/facetedPlots/FacetedHeatmap.tsx index a17c5cb8..b4f86056 100644 --- a/src/plots/facetedPlots/FacetedHeatmap.tsx +++ b/src/plots/facetedPlots/FacetedHeatmap.tsx @@ -14,7 +14,7 @@ const defaultSpacingOptions: HeatmapProps['spacingOptions'] = { marginRight: 10, marginLeft: 25, marginBottom: 40, - marginTop: 80, + marginTop: 60, }; type FacetedHeatmapProps = Omit< diff --git a/src/plots/facetedPlots/FacetedXYPlot.tsx b/src/plots/facetedPlots/FacetedXYPlot.tsx index 243b7eaa..1f67bdc4 100644 --- a/src/plots/facetedPlots/FacetedXYPlot.tsx +++ b/src/plots/facetedPlots/FacetedXYPlot.tsx @@ -14,7 +14,7 @@ const defaultSpacingOptions: XYPlotProps['spacingOptions'] = { marginRight: 20, marginLeft: 50, marginBottom: 40, - marginTop: 30, + marginTop: 50, }; type FacetedXYPlotProps = Omit< From fc750389d211d50df57497f3af7de6db2968ee1a Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Tue, 7 Dec 2021 16:20:59 -0500 Subject: [PATCH 17/22] Export default faceted plot styles --- src/plots/facetedPlots/FacetedBarplot.tsx | 4 ++-- src/plots/facetedPlots/FacetedBoxplot.tsx | 4 ++-- src/plots/facetedPlots/FacetedHeatmap.tsx | 4 ++-- src/plots/facetedPlots/FacetedHistogram.tsx | 4 ++-- src/plots/facetedPlots/FacetedMosaicPlot.tsx | 21 ++------------------ src/plots/facetedPlots/FacetedPiePlot.tsx | 4 ++-- src/plots/facetedPlots/FacetedXYPlot.tsx | 4 ++-- 7 files changed, 14 insertions(+), 31 deletions(-) diff --git a/src/plots/facetedPlots/FacetedBarplot.tsx b/src/plots/facetedPlots/FacetedBarplot.tsx index eff48743..1e7e484d 100644 --- a/src/plots/facetedPlots/FacetedBarplot.tsx +++ b/src/plots/facetedPlots/FacetedBarplot.tsx @@ -2,7 +2,7 @@ import Barplot, { BarplotProps } from '../Barplot'; import FacetedPlot, { FacetedPlotProps } from '../FacetedPlot'; import { BarplotData } from '../../types/plots'; -const defaultContainerStyles: BarplotProps['containerStyles'] = { +export const defaultContainerStyles: BarplotProps['containerStyles'] = { height: 300, width: 375, marginLeft: '0.75rem', @@ -10,7 +10,7 @@ const defaultContainerStyles: BarplotProps['containerStyles'] = { boxShadow: '1px 1px 4px #00000066', }; -const defaultSpacingOptions: BarplotProps['spacingOptions'] = { +export const defaultSpacingOptions: BarplotProps['spacingOptions'] = { marginRight: 10, marginLeft: 10, marginBottom: 10, diff --git a/src/plots/facetedPlots/FacetedBoxplot.tsx b/src/plots/facetedPlots/FacetedBoxplot.tsx index 07ae395c..be6ace00 100644 --- a/src/plots/facetedPlots/FacetedBoxplot.tsx +++ b/src/plots/facetedPlots/FacetedBoxplot.tsx @@ -2,7 +2,7 @@ import Boxplot, { BoxplotProps } from '../Boxplot'; import FacetedPlot, { FacetedPlotProps } from '../FacetedPlot'; import { BoxplotData } from '../../types/plots'; -const defaultContainerStyles: BoxplotProps['containerStyles'] = { +export const defaultContainerStyles: BoxplotProps['containerStyles'] = { height: 300, width: 375, marginLeft: '0.75rem', @@ -10,7 +10,7 @@ const defaultContainerStyles: BoxplotProps['containerStyles'] = { boxShadow: '1px 1px 4px #00000066', }; -const defaultSpacingOptions: BoxplotProps['spacingOptions'] = { +export const defaultSpacingOptions: BoxplotProps['spacingOptions'] = { marginRight: 15, marginLeft: 15, marginBottom: 10, diff --git a/src/plots/facetedPlots/FacetedHeatmap.tsx b/src/plots/facetedPlots/FacetedHeatmap.tsx index b4f86056..efb767a9 100644 --- a/src/plots/facetedPlots/FacetedHeatmap.tsx +++ b/src/plots/facetedPlots/FacetedHeatmap.tsx @@ -2,7 +2,7 @@ import Heatmap, { HeatmapProps } from '../Heatmap'; import FacetedPlot, { FacetedPlotProps } from '../FacetedPlot'; import { HeatmapData } from '../../types/plots'; -const defaultContainerStyles: HeatmapProps['containerStyles'] = { +export const defaultContainerStyles: HeatmapProps['containerStyles'] = { height: 300, width: 375, marginLeft: '0.75rem', @@ -10,7 +10,7 @@ const defaultContainerStyles: HeatmapProps['containerStyles'] = { boxShadow: '1px 1px 4px #00000066', }; -const defaultSpacingOptions: HeatmapProps['spacingOptions'] = { +export const defaultSpacingOptions: HeatmapProps['spacingOptions'] = { marginRight: 10, marginLeft: 25, marginBottom: 40, diff --git a/src/plots/facetedPlots/FacetedHistogram.tsx b/src/plots/facetedPlots/FacetedHistogram.tsx index 214540b3..9a954d09 100644 --- a/src/plots/facetedPlots/FacetedHistogram.tsx +++ b/src/plots/facetedPlots/FacetedHistogram.tsx @@ -2,7 +2,7 @@ import Histogram, { HistogramProps } from '../Histogram'; import FacetedPlot, { FacetedPlotProps } from '../FacetedPlot'; import { HistogramData } from '../../types/plots'; -const defaultContainerStyles: HistogramProps['containerStyles'] = { +export const defaultContainerStyles: HistogramProps['containerStyles'] = { height: 300, width: 375, marginLeft: '0.75rem', @@ -11,7 +11,7 @@ const defaultContainerStyles: HistogramProps['containerStyles'] = { boxShadow: '1px 1px 4px #00000066', }; -const defaultSpacingOptions: HistogramProps['spacingOptions'] = { +export const defaultSpacingOptions: HistogramProps['spacingOptions'] = { marginRight: 10, marginLeft: 10, marginBottom: 10, diff --git a/src/plots/facetedPlots/FacetedMosaicPlot.tsx b/src/plots/facetedPlots/FacetedMosaicPlot.tsx index 41ddd3ff..a6d1427c 100644 --- a/src/plots/facetedPlots/FacetedMosaicPlot.tsx +++ b/src/plots/facetedPlots/FacetedMosaicPlot.tsx @@ -2,24 +2,7 @@ import MosaicPlot, { MosaicPlotProps } from '../MosaicPlot'; import FacetedPlot, { FacetedPlotProps } from '../FacetedPlot'; import { MosaicPlotData } from '../../types/plots'; -/** What to do with these? */ -// const statsTableStyles = { -// width: plotContainerStyles.width, -// }; - -// const facetedStatsTableStyles = {}; - -// const facetedStatsTableContainerStyles = { -// display: 'grid', -// gridAutoFlow: 'column', -// gridAutoColumns: 'max-content', -// alignItems: 'flex-start', -// width: '100%', -// overflow: 'auto', -// gap: '0.5em', -// }; - -const defaultContainerStyles: MosaicPlotProps['containerStyles'] = { +export const defaultContainerStyles: MosaicPlotProps['containerStyles'] = { height: 360, width: 750 / 1.45, marginLeft: '0.75rem', @@ -27,7 +10,7 @@ const defaultContainerStyles: MosaicPlotProps['containerStyles'] = { boxShadow: '1px 1px 4px #00000066', }; -const defaultSpacingOptions: MosaicPlotProps['spacingOptions'] = { +export const defaultSpacingOptions: MosaicPlotProps['spacingOptions'] = { marginRight: 15, marginLeft: 15, marginBottom: 10, diff --git a/src/plots/facetedPlots/FacetedPiePlot.tsx b/src/plots/facetedPlots/FacetedPiePlot.tsx index 58612ebf..5bd71eff 100644 --- a/src/plots/facetedPlots/FacetedPiePlot.tsx +++ b/src/plots/facetedPlots/FacetedPiePlot.tsx @@ -4,7 +4,7 @@ import { PiePlotData } from '../../types/plots'; import { useCallback } from 'react'; import { select } from 'd3'; -const defaultContainerStyles: PiePlotProps['containerStyles'] = { +export const defaultContainerStyles: PiePlotProps['containerStyles'] = { height: 300, width: 375, marginLeft: '0.75rem', @@ -12,7 +12,7 @@ const defaultContainerStyles: PiePlotProps['containerStyles'] = { boxShadow: '1px 1px 4px #00000066', }; -const defaultSpacingOptions: PiePlotProps['spacingOptions'] = { +export const defaultSpacingOptions: PiePlotProps['spacingOptions'] = { marginRight: 10, marginLeft: 10, marginBottom: 10, diff --git a/src/plots/facetedPlots/FacetedXYPlot.tsx b/src/plots/facetedPlots/FacetedXYPlot.tsx index 1f67bdc4..39f907e9 100644 --- a/src/plots/facetedPlots/FacetedXYPlot.tsx +++ b/src/plots/facetedPlots/FacetedXYPlot.tsx @@ -2,7 +2,7 @@ import XYPlot, { XYPlotProps } from '../XYPlot'; import FacetedPlot, { FacetedPlotProps } from '../FacetedPlot'; import { XYPlotData } from '../../types/plots'; -const defaultContainerStyles: XYPlotProps['containerStyles'] = { +export const defaultContainerStyles: XYPlotProps['containerStyles'] = { height: 300, width: 750 / 1.75, marginLeft: '0.75rem', @@ -10,7 +10,7 @@ const defaultContainerStyles: XYPlotProps['containerStyles'] = { boxShadow: '1px 1px 4px #00000066', }; -const defaultSpacingOptions: XYPlotProps['spacingOptions'] = { +export const defaultSpacingOptions: XYPlotProps['spacingOptions'] = { marginRight: 20, marginLeft: 50, marginBottom: 40, From ac3926d128d9cfd860506ccbb8b5e25f00e9da4a Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Wed, 8 Dec 2021 16:30:53 -0500 Subject: [PATCH 18/22] Make FacetedPlotPropsWithRef --- src/plots/FacetedPlot.tsx | 7 ++++++- src/plots/facetedPlots/FacetedBarplot.tsx | 4 ++-- src/plots/facetedPlots/FacetedBoxplot.tsx | 4 ++-- src/plots/facetedPlots/FacetedHeatmap.tsx | 4 ++-- src/plots/facetedPlots/FacetedHistogram.tsx | 4 ++-- src/plots/facetedPlots/FacetedMosaicPlot.tsx | 4 ++-- src/plots/facetedPlots/FacetedPiePlot.tsx | 4 ++-- src/plots/facetedPlots/FacetedXYPlot.tsx | 4 ++-- 8 files changed, 20 insertions(+), 15 deletions(-) diff --git a/src/plots/FacetedPlot.tsx b/src/plots/FacetedPlot.tsx index dfb8f67d..4a6bf97c 100644 --- a/src/plots/FacetedPlot.tsx +++ b/src/plots/FacetedPlot.tsx @@ -32,6 +32,11 @@ export interface FacetedPlotProps> { checkedLegendItems?: string[]; } +export interface FacetedPlotPropsWithRef> + extends FacetedPlotProps { + facetedPlotRef?: Ref; +} + function renderFacetedPlot>( props: FacetedPlotProps, ref: Ref @@ -160,7 +165,7 @@ const makeFacetedPlotComponent = memoize(function >( }); export default function FacetedPlot>( - props: FacetedPlotProps & { facetedPlotRef?: Ref } + props: FacetedPlotPropsWithRef ) { const FacetedPlotComponent = makeFacetedPlotComponent(props.component); diff --git a/src/plots/facetedPlots/FacetedBarplot.tsx b/src/plots/facetedPlots/FacetedBarplot.tsx index 1e7e484d..4674f538 100644 --- a/src/plots/facetedPlots/FacetedBarplot.tsx +++ b/src/plots/facetedPlots/FacetedBarplot.tsx @@ -1,5 +1,5 @@ import Barplot, { BarplotProps } from '../Barplot'; -import FacetedPlot, { FacetedPlotProps } from '../FacetedPlot'; +import FacetedPlot, { FacetedPlotPropsWithRef } from '../FacetedPlot'; import { BarplotData } from '../../types/plots'; export const defaultContainerStyles: BarplotProps['containerStyles'] = { @@ -18,7 +18,7 @@ export const defaultSpacingOptions: BarplotProps['spacingOptions'] = { }; type FacetedBarplotProps = Omit< - FacetedPlotProps, + FacetedPlotPropsWithRef, 'component' >; diff --git a/src/plots/facetedPlots/FacetedBoxplot.tsx b/src/plots/facetedPlots/FacetedBoxplot.tsx index be6ace00..96db91e8 100644 --- a/src/plots/facetedPlots/FacetedBoxplot.tsx +++ b/src/plots/facetedPlots/FacetedBoxplot.tsx @@ -1,5 +1,5 @@ import Boxplot, { BoxplotProps } from '../Boxplot'; -import FacetedPlot, { FacetedPlotProps } from '../FacetedPlot'; +import FacetedPlot, { FacetedPlotPropsWithRef } from '../FacetedPlot'; import { BoxplotData } from '../../types/plots'; export const defaultContainerStyles: BoxplotProps['containerStyles'] = { @@ -18,7 +18,7 @@ export const defaultSpacingOptions: BoxplotProps['spacingOptions'] = { }; type FacetedBoxplotProps = Omit< - FacetedPlotProps, + FacetedPlotPropsWithRef, 'component' >; diff --git a/src/plots/facetedPlots/FacetedHeatmap.tsx b/src/plots/facetedPlots/FacetedHeatmap.tsx index efb767a9..d5918871 100644 --- a/src/plots/facetedPlots/FacetedHeatmap.tsx +++ b/src/plots/facetedPlots/FacetedHeatmap.tsx @@ -1,5 +1,5 @@ import Heatmap, { HeatmapProps } from '../Heatmap'; -import FacetedPlot, { FacetedPlotProps } from '../FacetedPlot'; +import FacetedPlot, { FacetedPlotPropsWithRef } from '../FacetedPlot'; import { HeatmapData } from '../../types/plots'; export const defaultContainerStyles: HeatmapProps['containerStyles'] = { @@ -18,7 +18,7 @@ export const defaultSpacingOptions: HeatmapProps['spacingOptions'] = { }; type FacetedHeatmapProps = Omit< - FacetedPlotProps, + FacetedPlotPropsWithRef, 'component' >; diff --git a/src/plots/facetedPlots/FacetedHistogram.tsx b/src/plots/facetedPlots/FacetedHistogram.tsx index 9a954d09..202f9c20 100644 --- a/src/plots/facetedPlots/FacetedHistogram.tsx +++ b/src/plots/facetedPlots/FacetedHistogram.tsx @@ -1,5 +1,5 @@ import Histogram, { HistogramProps } from '../Histogram'; -import FacetedPlot, { FacetedPlotProps } from '../FacetedPlot'; +import FacetedPlot, { FacetedPlotPropsWithRef } from '../FacetedPlot'; import { HistogramData } from '../../types/plots'; export const defaultContainerStyles: HistogramProps['containerStyles'] = { @@ -19,7 +19,7 @@ export const defaultSpacingOptions: HistogramProps['spacingOptions'] = { }; type FacetedHistogramProps = Omit< - FacetedPlotProps, + FacetedPlotPropsWithRef, 'component' >; diff --git a/src/plots/facetedPlots/FacetedMosaicPlot.tsx b/src/plots/facetedPlots/FacetedMosaicPlot.tsx index a6d1427c..b1de2e2f 100644 --- a/src/plots/facetedPlots/FacetedMosaicPlot.tsx +++ b/src/plots/facetedPlots/FacetedMosaicPlot.tsx @@ -1,5 +1,5 @@ import MosaicPlot, { MosaicPlotProps } from '../MosaicPlot'; -import FacetedPlot, { FacetedPlotProps } from '../FacetedPlot'; +import FacetedPlot, { FacetedPlotPropsWithRef } from '../FacetedPlot'; import { MosaicPlotData } from '../../types/plots'; export const defaultContainerStyles: MosaicPlotProps['containerStyles'] = { @@ -18,7 +18,7 @@ export const defaultSpacingOptions: MosaicPlotProps['spacingOptions'] = { }; type FacetedMosaicPlotProps = Omit< - FacetedPlotProps, + FacetedPlotPropsWithRef, 'component' >; diff --git a/src/plots/facetedPlots/FacetedPiePlot.tsx b/src/plots/facetedPlots/FacetedPiePlot.tsx index 5bd71eff..b068ee53 100644 --- a/src/plots/facetedPlots/FacetedPiePlot.tsx +++ b/src/plots/facetedPlots/FacetedPiePlot.tsx @@ -1,5 +1,5 @@ import PiePlot, { PiePlotProps } from '../PiePlot'; -import FacetedPlot, { FacetedPlotProps } from '../FacetedPlot'; +import FacetedPlot, { FacetedPlotPropsWithRef } from '../FacetedPlot'; import { PiePlotData } from '../../types/plots'; import { useCallback } from 'react'; import { select } from 'd3'; @@ -20,7 +20,7 @@ export const defaultSpacingOptions: PiePlotProps['spacingOptions'] = { }; type FacetedPiePlotProps = Omit< - FacetedPlotProps, + FacetedPlotPropsWithRef, 'component' >; diff --git a/src/plots/facetedPlots/FacetedXYPlot.tsx b/src/plots/facetedPlots/FacetedXYPlot.tsx index 39f907e9..aeabb2d0 100644 --- a/src/plots/facetedPlots/FacetedXYPlot.tsx +++ b/src/plots/facetedPlots/FacetedXYPlot.tsx @@ -1,5 +1,5 @@ import XYPlot, { XYPlotProps } from '../XYPlot'; -import FacetedPlot, { FacetedPlotProps } from '../FacetedPlot'; +import FacetedPlot, { FacetedPlotPropsWithRef } from '../FacetedPlot'; import { XYPlotData } from '../../types/plots'; export const defaultContainerStyles: XYPlotProps['containerStyles'] = { @@ -18,7 +18,7 @@ export const defaultSpacingOptions: XYPlotProps['spacingOptions'] = { }; type FacetedXYPlotProps = Omit< - FacetedPlotProps, + FacetedPlotPropsWithRef, 'component' >; From fa38b76988736c9784d5a136196064891bbab698 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Wed, 8 Dec 2021 16:32:41 -0500 Subject: [PATCH 19/22] Add button title --- src/plots/FacetedPlot.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/plots/FacetedPlot.tsx b/src/plots/FacetedPlot.tsx index 4a6bf97c..9580fdec 100644 --- a/src/plots/FacetedPlot.tsx +++ b/src/plots/FacetedPlot.tsx @@ -139,6 +139,7 @@ function renderFacetedPlot>( border: 'none', zIndex: 2000, }} + title="Close expanded plot" > From b1a77749a4eb06b8a9860b3b66c62437b9c9a8e4 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Wed, 8 Dec 2021 16:33:17 -0500 Subject: [PATCH 20/22] Increase pixels per character in mosaic plot --- src/plots/MosaicPlot.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plots/MosaicPlot.tsx b/src/plots/MosaicPlot.tsx index beb7a710..9b2b8559 100644 --- a/src/plots/MosaicPlot.tsx +++ b/src/plots/MosaicPlot.tsx @@ -131,7 +131,7 @@ const MosaicPlot = makePlotlyPlotComponent( containerHeight - marginTop - marginBottom - - 5 * longestIndependentTickLabelLength; + 8 * longestIndependentTickLabelLength; if (!independentAxisLabel) plotHeight -= 20; // Calculate the legend trace group gap accordingly legendTraceGroupGap = From eca0bbce0bdc2c4655bcc8b4338c3572578ff88f Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Wed, 8 Dec 2021 16:35:21 -0500 Subject: [PATCH 21/22] Reorder component props --- src/plots/facetedPlots/FacetedBarplot.tsx | 9 ++++++--- src/plots/facetedPlots/FacetedBoxplot.tsx | 9 ++++++--- src/plots/facetedPlots/FacetedHeatmap.tsx | 9 ++++++--- src/plots/facetedPlots/FacetedHistogram.tsx | 9 ++++++--- src/plots/facetedPlots/FacetedMosaicPlot.tsx | 9 ++++++--- src/plots/facetedPlots/FacetedPiePlot.tsx | 8 +++++--- src/plots/facetedPlots/FacetedXYPlot.tsx | 9 ++++++--- 7 files changed, 41 insertions(+), 21 deletions(-) diff --git a/src/plots/facetedPlots/FacetedBarplot.tsx b/src/plots/facetedPlots/FacetedBarplot.tsx index 4674f538..eb7f18f2 100644 --- a/src/plots/facetedPlots/FacetedBarplot.tsx +++ b/src/plots/facetedPlots/FacetedBarplot.tsx @@ -23,14 +23,17 @@ type FacetedBarplotProps = Omit< >; const FacetedBarplot = (facetedBarplotProps: FacetedBarplotProps) => { + const { componentProps } = facetedBarplotProps; + return ( ); diff --git a/src/plots/facetedPlots/FacetedBoxplot.tsx b/src/plots/facetedPlots/FacetedBoxplot.tsx index 96db91e8..bb064a02 100644 --- a/src/plots/facetedPlots/FacetedBoxplot.tsx +++ b/src/plots/facetedPlots/FacetedBoxplot.tsx @@ -23,14 +23,17 @@ type FacetedBoxplotProps = Omit< >; const FacetedBoxplot = (facetedBoxplotProps: FacetedBoxplotProps) => { + const { componentProps } = facetedBoxplotProps; + return ( ); diff --git a/src/plots/facetedPlots/FacetedHeatmap.tsx b/src/plots/facetedPlots/FacetedHeatmap.tsx index d5918871..ce03440a 100644 --- a/src/plots/facetedPlots/FacetedHeatmap.tsx +++ b/src/plots/facetedPlots/FacetedHeatmap.tsx @@ -23,14 +23,17 @@ type FacetedHeatmapProps = Omit< >; const FacetedHeatmap = (facetedHeatmapProps: FacetedHeatmapProps) => { + const { componentProps } = facetedHeatmapProps; + return ( ); diff --git a/src/plots/facetedPlots/FacetedHistogram.tsx b/src/plots/facetedPlots/FacetedHistogram.tsx index 202f9c20..4fb45d3f 100644 --- a/src/plots/facetedPlots/FacetedHistogram.tsx +++ b/src/plots/facetedPlots/FacetedHistogram.tsx @@ -24,14 +24,17 @@ type FacetedHistogramProps = Omit< >; const FacetedHistogram = (facetedHistogramProps: FacetedHistogramProps) => { + const { componentProps } = facetedHistogramProps; + return ( ); diff --git a/src/plots/facetedPlots/FacetedMosaicPlot.tsx b/src/plots/facetedPlots/FacetedMosaicPlot.tsx index b1de2e2f..01e10d50 100644 --- a/src/plots/facetedPlots/FacetedMosaicPlot.tsx +++ b/src/plots/facetedPlots/FacetedMosaicPlot.tsx @@ -23,14 +23,17 @@ type FacetedMosaicPlotProps = Omit< >; const FacetedMosaicPlot = (facetedMosaicPlotProps: FacetedMosaicPlotProps) => { + const { componentProps } = facetedMosaicPlotProps; + return ( ); diff --git a/src/plots/facetedPlots/FacetedPiePlot.tsx b/src/plots/facetedPlots/FacetedPiePlot.tsx index b068ee53..0a7ad80f 100644 --- a/src/plots/facetedPlots/FacetedPiePlot.tsx +++ b/src/plots/facetedPlots/FacetedPiePlot.tsx @@ -25,6 +25,7 @@ type FacetedPiePlotProps = Omit< >; const FacetedPiePlot = (facetedPiePlotProps: FacetedPiePlotProps) => { + const { componentProps } = facetedPiePlotProps; const onPlotlyRender = useCallback((_, graphDiv) => { // Replace each slice DOM node with a copy of itself. // This removes the existing click event handler, which @@ -47,10 +48,11 @@ const FacetedPiePlot = (facetedPiePlotProps: FacetedPiePlotProps) => { component={PiePlot} {...facetedPiePlotProps} componentProps={{ - containerStyles: defaultContainerStyles, - spacingOptions: defaultSpacingOptions, + ...componentProps, + containerStyles: + componentProps.containerStyles ?? defaultContainerStyles, + spacingOptions: componentProps.spacingOptions ?? defaultSpacingOptions, onPlotlyRender, - ...facetedPiePlotProps.componentProps, }} /> ); diff --git a/src/plots/facetedPlots/FacetedXYPlot.tsx b/src/plots/facetedPlots/FacetedXYPlot.tsx index aeabb2d0..0648eeca 100644 --- a/src/plots/facetedPlots/FacetedXYPlot.tsx +++ b/src/plots/facetedPlots/FacetedXYPlot.tsx @@ -23,14 +23,17 @@ type FacetedXYPlotProps = Omit< >; const FacetedXYPlot = (facetedXYPlotProps: FacetedXYPlotProps) => { + const { componentProps } = facetedXYPlotProps; + return ( ); From 795102b4475416a585f2803a747503fdda808e97 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Wed, 8 Dec 2021 16:36:11 -0500 Subject: [PATCH 22/22] Update faceted plot default styles --- src/plots/facetedPlots/FacetedBoxplot.tsx | 1 + src/plots/facetedPlots/FacetedHistogram.tsx | 2 +- src/plots/facetedPlots/FacetedMosaicPlot.tsx | 1 + src/plots/facetedPlots/FacetedXYPlot.tsx | 1 + 4 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/plots/facetedPlots/FacetedBoxplot.tsx b/src/plots/facetedPlots/FacetedBoxplot.tsx index bb064a02..5338003f 100644 --- a/src/plots/facetedPlots/FacetedBoxplot.tsx +++ b/src/plots/facetedPlots/FacetedBoxplot.tsx @@ -6,6 +6,7 @@ export const defaultContainerStyles: BoxplotProps['containerStyles'] = { height: 300, width: 375, marginLeft: '0.75rem', + marginBottom: '0.25rem', border: '1px solid #dedede', boxShadow: '1px 1px 4px #00000066', }; diff --git a/src/plots/facetedPlots/FacetedHistogram.tsx b/src/plots/facetedPlots/FacetedHistogram.tsx index 4fb45d3f..1960e311 100644 --- a/src/plots/facetedPlots/FacetedHistogram.tsx +++ b/src/plots/facetedPlots/FacetedHistogram.tsx @@ -6,7 +6,7 @@ export const defaultContainerStyles: HistogramProps['containerStyles'] = { height: 300, width: 375, marginLeft: '0.75rem', - marginBottom: '.5em', + marginBottom: '0.25rem', border: '1px solid #dedede', boxShadow: '1px 1px 4px #00000066', }; diff --git a/src/plots/facetedPlots/FacetedMosaicPlot.tsx b/src/plots/facetedPlots/FacetedMosaicPlot.tsx index 01e10d50..eb6c57cc 100644 --- a/src/plots/facetedPlots/FacetedMosaicPlot.tsx +++ b/src/plots/facetedPlots/FacetedMosaicPlot.tsx @@ -6,6 +6,7 @@ export const defaultContainerStyles: MosaicPlotProps['containerStyles'] = { height: 360, width: 750 / 1.45, marginLeft: '0.75rem', + marginBottom: '0.25rem', border: '1px solid #dedede', boxShadow: '1px 1px 4px #00000066', }; diff --git a/src/plots/facetedPlots/FacetedXYPlot.tsx b/src/plots/facetedPlots/FacetedXYPlot.tsx index 0648eeca..36394fdd 100644 --- a/src/plots/facetedPlots/FacetedXYPlot.tsx +++ b/src/plots/facetedPlots/FacetedXYPlot.tsx @@ -6,6 +6,7 @@ export const defaultContainerStyles: XYPlotProps['containerStyles'] = { height: 300, width: 750 / 1.75, marginLeft: '0.75rem', + marginBottom: '0.25rem', border: '1px solid #dedede', boxShadow: '1px 1px 4px #00000066', };