Как определить наилучший тип диаграммы, программно на основе характеристик наборов данных? ⇐ Javascript

[Anonymous]

import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';
import { UtilsService } from '../services/utils.service';
import Plotly from 'plotly.js-dist-min';

@Directive({
selector: '[appDynamicPlotly]'
})
export class DynamicPlotlyDirective implements OnInit {
@Input() public data: any;
@Input() public group: string = 'Month';
protected plot: any;
private currentType: string = 'bar'; // Default plot type
private currentMode: string = ''; // Default plot type

constructor(private elementRef: ElementRef, private utilsService: UtilsService, private renderer: Renderer2) {}

ngOnInit() {
this.plot = this.elementRef.nativeElement;
this.renderPlot();
}

private renderPlot() {
const trace: any = this.getTrace();

const layout: Partial
= this.getLayout();

const config: Partial = {
responsive: true,
displayModeBar: false,
displaylogo: false
};

Plotly.react(this.plot, trace, layout, config);
}

private getTrace() {
switch (this.currentType) {
case 'pie':
return [
{
labels: this.data[this.group], // Grouped data as labels
values: this.data.storage_state_kg, // Corresponding values
type: 'pie',
// textinfo: 'label+percent',
textposition: 'outside',
automargin: true,
marker: { colors: ['#046CC4', '#F066AC', '#3C8454', '#64323A', '#182D44'] },
hovertemplate: '%{label}
H₂ Production: %{value}'
}
];
case 'line':
return [
{
x: this.data[this.group],
y: this.data.storage_state_kg,
type: 'scatter',
mode: 'lines',
name: 'H₂',
line: { color: '#046CC4', width: 2 },
hovertemplate: '%{x}
H₂ Production: %{y}'
}
];
case 'scatter':
return [
{
x: this.data[this.group],
y: this.data.storage_state_kg,
type: 'scatter',
mode: 'markers',
name: 'H₂',
marker: { color: '#046CC4', size: 8 },
hovertemplate: '%{x}
H₂ Production: %{y}'
}
];
case 'waterfall':
return [
{
x: this.data[this.group],
y: this.data.storage_state_kg,
type: 'waterfall',
name: 'H₂',
measure: Array(this.data.storage_state_kg.length).fill('relative'),
connector: { line: { color: '#7F7F7F' } },
hovertemplate: '%{x}
H₂ Production: %{y}',
increasing: { marker: { color: '#046CC4' } },
decreasing: { marker: { color: '#E74C3C' } },
totals: { marker: { color: '#2ECC71' } }
}
];
case 'bar':
default:
return [
{
x: this.data[this.group],
y: this.data.storage_state_kg,
type: 'bar',
name: 'H₂',
marker: { color: '#046CC4' },
hovertemplate: '%{x}
H₂ Production: %{customdata}',
customdata: this.data.storage_state_kg.map((val: number) =>
Number.isInteger(val) ? val.toFixed(0) : val.toFixed(3)
)
}
];
}
}

private getLayout(): Partial {
if (this.currentType === 'pie') {
return {
title: {
text: 'Dynamic Plot',
font: { size: 14 },
x: 0.5,
xanchor: 'center'
},
showlegend: true,
margin: { t: 50, b: 50, l: 60, r: 70 },
plot_bgcolor: '#F8F8F8',
paper_bgcolor: '#F8F8F8'
};
} else {
return {
title: {
text: 'Dynamic Plot',
font: { size: 14 },
x: 0.5,
xanchor: 'center'
},
xaxis: {
tickmode: 'array',
tickvals: this.data[this.group],
ticktext: this.data[this.group].map((val: any) =>
this.utilsService.getDateTextForChart(val, this.group)
),
tickfont: { size: 14, color: '#000000' },
showgrid: true,
tickangle: 0
},
yaxis: {
title: {
text: 'H₂ Storage State (MT H₂)',
font: { size: 16, color: '#000000' },
standoff: 30
},
tickfont: { size: 14, color: '#000000' },
showgrid: false,
rangemode: 'tozero'
},
dragmode: undefined,
barmode: this.currentType === 'bar' ? 'stack' : undefined,
margin: { t: 50, b: 50, l: 60, r: 70 },
bargap: 0.7,
plot_bgcolor: '#F8F8F8',
paper_bgcolor: '#F8F8F8'
};
}
}

changePlotType(type: string, mode: string) {
this.currentType = type; // Update the plot type
this.currentMode = mode; // Update the plot type
this.renderPlot(); // Re-render the plot with the new type
}
}
< /code>
Я работаю над проектом, используя сюжет и угловой, где мне нужно позволить пользователям динамически переключаться между различными типами диаграмм (например, стержень, пирог, рассеяние, водопад и т. Д.) . Вместо этого есть ли в сюжете какую-либо внешнюю библиотеку, плагин или встроенную функцию, которая может предложить соответствующие типы диаграмм на основе структуры или типа набора данных? Например, если данные являются категориальными по сравнению с числовым, инструмент должен рекомендовать стержни или круговые диаграммы.


Подробнее здесь: https://stackoverflow.com/questions/794 ... dataset-ch