diff --git a/src/lib/vis/visualizations/vis1D/components/CustomChartPlotly.tsx b/src/lib/vis/visualizations/vis1D/components/CustomChartPlotly.tsx index 1ae04dca49d72451d966138cbed9f19bc85aea2b..28ab5bf1ba025799d4c3b717a8e1b76398a642c2 100644 --- a/src/lib/vis/visualizations/vis1D/components/CustomChartPlotly.tsx +++ b/src/lib/vis/visualizations/vis1D/components/CustomChartPlotly.tsx @@ -1,6 +1,6 @@ import React, { useRef, useEffect, useState } from 'react'; import Plot from 'react-plotly.js'; -import { PreparePlot, preparePlotData, SupportedPlotType } from './MakePlot'; +import { PreparePlot } from './MakePlot'; export const CustomChartPlotly: React.FC<{ plot: PreparePlot }> = ({ plot }) => { const internalRef = useRef<HTMLDivElement>(null); diff --git a/src/lib/vis/visualizations/vis1D/components/MakePlot.ts b/src/lib/vis/visualizations/vis1D/components/MakePlot.ts index 399ce327799470bce8867013d7686dffe5db88e8..6640edf2452fc5b8751dd6b1c81c9b6c7acbc045 100644 --- a/src/lib/vis/visualizations/vis1D/components/MakePlot.ts +++ b/src/lib/vis/visualizations/vis1D/components/MakePlot.ts @@ -1,6 +1,7 @@ import { scaleQuantize, scaleOrdinal } from 'd3'; import { PlotType } from 'plotly.js'; import { visualizationColors } from 'ts-common'; +import { Vis1DHistogramAggregation, vis1DHistogramAggregationOptions } from '../model'; export const plotTypeOptions = ['bar', 'scatter', 'line', 'histogram', 'pie'] as const; export type SupportedPlotType = (typeof plotTypeOptions)[number]; @@ -143,7 +144,7 @@ export const preparePlotData = (params: { } } - if (!groupBy) { + if (!groupBy || vis1DHistogramAggregationOptions.includes(groupBy as Vis1DHistogramAggregation)) { if (xAxisData.length !== 0 && yAxisData && yAxisData.length !== 0) { xValues = xAxisData; yValues = yAxisData; @@ -379,8 +380,9 @@ export const preparePlotData = (params: { type: 'bar' as PlotType, x: sortedLabels, y: sortedFrequencies, + text: sortedFrequencies.length < 20 ? sortedFrequencies.map(String) : [], marker: { color: primaryColor }, - customdata: sortedLabels, + customdata: sortedLabels.map(label => xAxisLabel + ' ' + label), hovertemplate: '<b>%{customdata}</b>: %{y}<extra></extra>', }, ]; diff --git a/src/lib/vis/visualizations/vis1D/model.ts b/src/lib/vis/visualizations/vis1D/model.ts index 00b4c202a23035359a58bc0b3407fc19a9e7b936..ec1d4f10910dcb6bbd5a8f352b8b05a49a206d76 100644 --- a/src/lib/vis/visualizations/vis1D/model.ts +++ b/src/lib/vis/visualizations/vis1D/model.ts @@ -48,11 +48,14 @@ export const getAttributeValues = ( : 'NoData', ]; }); + const uniqueValues = Array.from(new Set(attValues.map(item => item[1]))); - if (!groupBy) return attValues.map(item => item[1]); + if (!groupBy) { + return uniqueValues; + } if (groupBy === 'count') { - return Object.values( + const agg = Object.entries( attValues .map(item => item[1]) .reduce( @@ -63,6 +66,11 @@ export const getAttributeValues = ( {} as Record<string, number>, ), ); + const ret = agg + .map(item => ({ id: item[0], value: item[1], position: uniqueValues.indexOf(item[0]) })) + .sort((a, b) => a.position - b.position) + .map(item => item.value); + return ret; } else if (groupBy === 'degree') { const attValuesMap = Object.fromEntries(attValues); const ids = attValues.map(item => item[0]); @@ -77,7 +85,10 @@ export const getAttributeValues = ( }, {} as Record<string, number>, ); - return attValues.map(item => degree[item[1]] || 0); + return attValues + .map(item => ({ id: item[0], value: degree[item[1]] || 0, position: uniqueValues.indexOf(item[0]) })) + .sort((a, b) => a.position - b.position) + .map(item => item.value); } else { console.error('Invalid groupBy value', groupBy); throw new Error('Invalid groupBy value');