1
0
Fork 0

Fix displaying many countries

This commit is contained in:
Chocobozzz 2023-12-08 11:05:47 +01:00
parent 8031504212
commit ba050fb0df
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
2 changed files with 25 additions and 5 deletions

View File

@ -45,7 +45,7 @@
</a> </a>
<ng-template ngbNavContent> <ng-template ngbNavContent>
<div class="chart-container" [ngStyle]="{ 'min-height': chartHeight }"> <div class="chart-container">
<p-chart <p-chart
*ngIf="chartOptions[availableChart.id]" *ngIf="chartOptions[availableChart.id]"
[height]="chartHeight" [width]="chartWidth" [height]="chartHeight" [width]="chartWidth"

View File

@ -1,4 +1,4 @@
import { ChartConfiguration, ChartData, PluginOptionsByType, Scale, TooltipItem } from 'chart.js' import { ChartConfiguration, ChartData, ChartOptions, PluginOptionsByType, Scale, TooltipItem } from 'chart.js'
import zoomPlugin from 'chartjs-plugin-zoom' import zoomPlugin from 'chartjs-plugin-zoom'
import { Observable, of } from 'rxjs' import { Observable, of } from 'rxjs'
import { SelectOptionsItem } from 'src/types' import { SelectOptionsItem } from 'src/types'
@ -25,6 +25,9 @@ type CountryData = { name: string, viewers: number }[]
type ChartIngestData = VideoStatsTimeserie | VideoStatsRetention | CountryData type ChartIngestData = VideoStatsTimeserie | VideoStatsRetention | CountryData
type ChartBuilderResult = { type ChartBuilderResult = {
type: 'line' | 'bar' type: 'line' | 'bar'
options?: ChartOptions<'bar'>
plugins: Partial<PluginOptionsByType<'line' | 'bar'>> plugins: Partial<PluginOptionsByType<'line' | 'bar'>>
data: ChartData<'line' | 'bar'> data: ChartData<'line' | 'bar'>
displayLegend: boolean displayLegend: boolean
@ -136,6 +139,12 @@ export class VideoStatsComponent implements OnInit {
onChartChange (newActive: ActiveGraphId) { onChartChange (newActive: ActiveGraphId) {
this.activeGraphId = newActive this.activeGraphId = newActive
if (newActive === 'countries') {
this.chartHeight = `${Math.max(this.countries.length * 20, 300)}px`
} else {
this.chartHeight = '300px'
}
this.loadChart() this.loadChart()
} }
@ -333,7 +342,7 @@ export class VideoStatsComponent implements OnInit {
countries: (rawData: CountryData) => this.buildCountryChartOptions(rawData) countries: (rawData: CountryData) => this.buildCountryChartOptions(rawData)
} }
const { type, data, displayLegend, plugins } = dataBuilders[graphId](this.chartIngestData[graphId]) const { type, data, displayLegend, plugins, options } = dataBuilders[graphId](this.chartIngestData[graphId])
const self = this const self = this
@ -342,6 +351,8 @@ export class VideoStatsComponent implements OnInit {
data, data,
options: { options: {
...options,
responsive: true, responsive: true,
scales: { scales: {
@ -366,7 +377,9 @@ export class VideoStatsComponent implements OnInit {
: undefined, : undefined,
ticks: { ticks: {
callback: value => this.formatYTick({ graphId, value }) callback: function (value) {
return self.formatYTick({ graphId, value, scale: this })
}
} }
} }
}, },
@ -489,6 +502,10 @@ export class VideoStatsComponent implements OnInit {
return { return {
type: 'bar' as 'bar', type: 'bar' as 'bar',
options: {
indexAxis: 'y'
},
displayLegend: true, displayLegend: true,
plugins: { plugins: {
@ -547,11 +564,14 @@ export class VideoStatsComponent implements OnInit {
private formatYTick (options: { private formatYTick (options: {
graphId: ActiveGraphId graphId: ActiveGraphId
value: number | string value: number | string
scale?: Scale
}) { }) {
const { graphId, value } = options const { graphId, value, scale } = options
if (graphId === 'retention') return value + ' %' if (graphId === 'retention') return value + ' %'
if (graphId === 'aggregateWatchTime') return secondsToTime(+value) if (graphId === 'aggregateWatchTime') return secondsToTime(+value)
if (graphId === 'countries' && scale) return scale.getLabelForValue(value as number)
return value.toLocaleString(this.localeId) return value.toLocaleString(this.localeId)
} }