From a6473ad6821cdb143f89ad9e54c5632db0260020 Mon Sep 17 00:00:00 2001 From: Alexander Vogt Date: Mon, 27 May 2024 12:23:52 +0200 Subject: [PATCH 01/16] move to distribution options component --- .../DistributionDiagram.vue | 34 ++++++++++++------ .../DistributionDiagramOptions.vue | 33 +++++++++++++++++ report-viewer/src/views/OverviewView.vue | 36 ++----------------- 3 files changed, 58 insertions(+), 45 deletions(-) rename report-viewer/src/components/{ => distributionDiagram}/DistributionDiagram.vue (70%) create mode 100644 report-viewer/src/components/distributionDiagram/DistributionDiagramOptions.vue diff --git a/report-viewer/src/components/DistributionDiagram.vue b/report-viewer/src/components/distributionDiagram/DistributionDiagram.vue similarity index 70% rename from report-viewer/src/components/DistributionDiagram.vue rename to report-viewer/src/components/distributionDiagram/DistributionDiagram.vue index c6ca774d53..bb7920230b 100644 --- a/report-viewer/src/components/DistributionDiagram.vue +++ b/report-viewer/src/components/distributionDiagram/DistributionDiagram.vue @@ -2,8 +2,12 @@ Bar diagram, displaying the distribution for the selected metric. --> @@ -14,13 +18,18 @@ import { Chart, registerables } from 'chart.js' import ChartDataLabels from 'chartjs-plugin-datalabels' import { graphColors } from '@/utils/ColorUtils' import type { Distribution } from '@/model/Distribution' +import { MetricType } from '@/model/MetricType' +import { store } from '@/stores/store' +import DistributionDiagramOptions from './DistributionDiagramOptions.vue' Chart.register(...registerables) Chart.register(ChartDataLabels) +console.log('AAA') + const props = defineProps({ - distribution: { - type: Object as PropType, + distributions: { + type: Object as PropType>, required: true }, xScale: { @@ -30,7 +39,10 @@ const props = defineProps({ } }) -const maxVal = computed(() => Math.max(...props.distribution.splitIntoTenBuckets())) +const graphOptions = computed(() => store().uiState.distributionChartConfig) +const distribution = computed(() => props.distributions[graphOptions.value.metric]) + +const maxVal = computed(() => Math.max(...distribution.value.splitIntoTenBuckets())) const labels = [ '91-100%', '81-90%', @@ -59,7 +71,7 @@ const chartData = computed(() => { datasets: [ { ...dataSetStyle.value, - data: props.distribution.splitIntoTenBuckets() + data: distribution.value.splitIntoTenBuckets() } ] } @@ -75,21 +87,21 @@ const options = computed(() => { //Highest count of submissions in a percentage range. We set the diagrams maximum shown value to maxVal + 5, //otherwise maximum is set to the highest count of submissions and is one bar always reaches the end. suggestedMax: - props.xScale === 'linear' + graphOptions.value.xScale === 'linear' ? maxVal.value + 5 : 10 ** Math.ceil(Math.log10(maxVal.value + 5)), - type: props.xScale, + type: graphOptions.value.xScale, ticks: { // ensures that in log mode tick labels are not overlappein - minRotation: props.xScale === 'logarithmic' ? 30 : 0, + minRotation: graphOptions.value.xScale === 'logarithmic' ? 30 : 0, autoSkipPadding: 10, color: graphColors.ticksAndFont.value, // ensures that in log mode ticks are placed evenly appart callback: function (value: any) { - if (props.xScale === 'logarithmic' && (value + '').match(/1(0)*[^1-9.]/)) { + if (graphOptions.value.xScale === 'logarithmic' && (value + '').match(/1(0)*[^1-9.]/)) { return value } - if (props.xScale !== 'logarithmic') { + if (graphOptions.value.xScale !== 'logarithmic') { return value } } diff --git a/report-viewer/src/components/distributionDiagram/DistributionDiagramOptions.vue b/report-viewer/src/components/distributionDiagram/DistributionDiagramOptions.vue new file mode 100644 index 0000000000..15f4633801 --- /dev/null +++ b/report-viewer/src/components/distributionDiagram/DistributionDiagramOptions.vue @@ -0,0 +1,33 @@ + + + diff --git a/report-viewer/src/views/OverviewView.vue b/report-viewer/src/views/OverviewView.vue index bd04988022..9abc8c1bad 100644 --- a/report-viewer/src/views/OverviewView.vue +++ b/report-viewer/src/views/OverviewView.vue @@ -78,35 +78,7 @@ class="flex max-h-0 min-h-full flex-1 flex-col print:max-h-none print:min-h-fit print:flex-none" >

Distribution of Comparisons:

- -
-

Options:

- - - - -
+ @@ -130,17 +102,13 @@ diff --git a/report-viewer/src/components/distributionDiagram/DistributionDiagramOptions.vue b/report-viewer/src/components/distributionDiagram/DistributionDiagramOptions.vue index 15f4633801..f8fbe73e4c 100644 --- a/report-viewer/src/components/distributionDiagram/DistributionDiagramOptions.vue +++ b/report-viewer/src/components/distributionDiagram/DistributionDiagramOptions.vue @@ -20,6 +20,15 @@ (store().uiState.distributionChartConfig.xScale = i == 0 ? 'linear' : 'logarithmic') " /> + diff --git a/report-viewer/src/model/Distribution.ts b/report-viewer/src/model/Distribution.ts index 73c7126f02..2e3ec39798 100644 --- a/report-viewer/src/model/Distribution.ts +++ b/report-viewer/src/model/Distribution.ts @@ -15,4 +15,11 @@ export class Distribution { } return tenValueArray } + + /** + * Returns the distribution summed at every percentile + */ + public splitIntoOneHundredBuckets(): number[] { + return Array.from(this._distribution) + } } diff --git a/report-viewer/src/model/ui/DistributionChartConfig.ts b/report-viewer/src/model/ui/DistributionChartConfig.ts index 84222054f4..b992e2e682 100644 --- a/report-viewer/src/model/ui/DistributionChartConfig.ts +++ b/report-viewer/src/model/ui/DistributionChartConfig.ts @@ -6,4 +6,5 @@ import type { MetricType } from '../MetricType' export interface DistributionChartConfig { metric: MetricType xScale: 'linear' | 'logarithmic' + resolution: 10 | 100 } diff --git a/report-viewer/src/stores/store.ts b/report-viewer/src/stores/store.ts index 9943e4ec22..f5206e8057 100644 --- a/report-viewer/src/stores/store.ts +++ b/report-viewer/src/stores/store.ts @@ -29,7 +29,8 @@ const store = defineStore('store', { comparisonTableClusterSorting: false, distributionChartConfig: { metric: MetricType.AVERAGE, - xScale: 'linear' + xScale: 'linear', + resolution: 10 } } }), From 95dfdc17fd54c88c9d8a85e237ae2298ef1c1655 Mon Sep 17 00:00:00 2001 From: Alexander Vogt Date: Tue, 28 May 2024 14:27:58 +0200 Subject: [PATCH 04/16] add checkable option --- .../optionsSelectors/CheckableSelector.vue | 69 +++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 report-viewer/src/components/optionsSelectors/CheckableSelector.vue diff --git a/report-viewer/src/components/optionsSelectors/CheckableSelector.vue b/report-viewer/src/components/optionsSelectors/CheckableSelector.vue new file mode 100644 index 0000000000..dff757badf --- /dev/null +++ b/report-viewer/src/components/optionsSelectors/CheckableSelector.vue @@ -0,0 +1,69 @@ + + + From 8a9e49bfc0b78321eed1587277cc55a62a4f595f Mon Sep 17 00:00:00 2001 From: Alexander Vogt Date: Tue, 28 May 2024 20:46:02 +0200 Subject: [PATCH 05/16] fix imports --- .../src/components/optionsSelectors/CheckableSelector.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/report-viewer/src/components/optionsSelectors/CheckableSelector.vue b/report-viewer/src/components/optionsSelectors/CheckableSelector.vue index dff757badf..a8ca4de844 100644 --- a/report-viewer/src/components/optionsSelectors/CheckableSelector.vue +++ b/report-viewer/src/components/optionsSelectors/CheckableSelector.vue @@ -31,6 +31,8 @@ From 560406d83a76ef9da7ce8a55a15e0c38fc28340b Mon Sep 17 00:00:00 2001 From: Alexander Vogt Date: Sat, 8 Jun 2024 17:18:11 +0200 Subject: [PATCH 07/16] add more distribution options --- .../DistributionDiagram.vue | 27 ++++++++++--------- .../DistributionDiagramOptions.vue | 11 +++++--- report-viewer/src/model/Distribution.ts | 21 +++++++-------- .../src/model/ui/DistributionChartConfig.ts | 3 ++- 4 files changed, 33 insertions(+), 29 deletions(-) diff --git a/report-viewer/src/components/distributionDiagram/DistributionDiagram.vue b/report-viewer/src/components/distributionDiagram/DistributionDiagram.vue index 15a0bfbd1b..e29f2fc8d6 100644 --- a/report-viewer/src/components/distributionDiagram/DistributionDiagram.vue +++ b/report-viewer/src/components/distributionDiagram/DistributionDiagram.vue @@ -40,9 +40,7 @@ const props = defineProps({ const graphOptions = computed(() => store().uiState.distributionChartConfig) const distribution = computed(() => props.distributions[graphOptions.value.metric]) const distributionData = computed(() => - graphOptions.value.resolution == 10 - ? distribution.value.splitIntoTenBuckets() - : distribution.value.splitIntoOneHundredBuckets() + distribution.value.splitIntoBuckets(graphOptions.value.resolution) ) const maxVal = computed(() => Math.max(...distributionData.value)) @@ -115,10 +113,16 @@ const options = computed(() => { color: graphColors.ticksAndFont.value, callback: function (reversedValue: any) { const value = distributionData.value.length - reversedValue - 1 - if (graphOptions.value.resolution == 10) { + if (graphOptions.value.resolution <= 10) { return getDataPointLabel(value) } else { - if (value == 99 || value % 10 == 0) { + let labelBreakPoint = 10 + if (graphOptions.value.resolution <= 25) { + labelBreakPoint = 5 + } else { + labelBreakPoint = Math.floor(graphOptions.value.resolution / 10) + } + if (value == graphOptions.value.resolution - 1 || value % labelBreakPoint == 0) { return getDataPointLabel(value) } } @@ -131,7 +135,7 @@ const options = computed(() => { }, plugins: { datalabels: { - display: graphOptions.value.resolution == 10, + display: graphOptions.value.resolution <= 20, color: graphColors.ticksAndFont.value, font: { weight: 'bold' as 'bold' @@ -143,8 +147,8 @@ const options = computed(() => { }, legend: { display: true, - position: 'bottom', - align: 'end', + position: 'bottom' as 'bottom', + align: 'end' as 'end', onClick: () => {} } } @@ -152,10 +156,7 @@ const options = computed(() => { }) function getDataPointLabel(index: number) { - if (graphOptions.value.resolution == 10) { - return index * 10 + '-' + (index * 10 + 10) + '%' - } else { - return index + '-' + (index + 1) + '%' - } + let perBucket = 100 / graphOptions.value.resolution + return index * perBucket + '-' + (index * perBucket + perBucket) + '%' } diff --git a/report-viewer/src/components/distributionDiagram/DistributionDiagramOptions.vue b/report-viewer/src/components/distributionDiagram/DistributionDiagramOptions.vue index f8fbe73e4c..18e5649705 100644 --- a/report-viewer/src/components/distributionDiagram/DistributionDiagramOptions.vue +++ b/report-viewer/src/components/distributionDiagram/DistributionDiagramOptions.vue @@ -23,10 +23,12 @@ @@ -39,4 +41,7 @@ import { store } from '@/stores/store' import MetricSelector from '@/components/optionsSelectors/MetricSelector.vue' import OptionsSelector from '@/components/optionsSelectors/OptionsSelectorComponent.vue' import ScrollableComponent from '../ScrollableComponent.vue' +import { type BucketOptions } from '@/model/Distribution' + +const resolutionOptions = [10, 20, 25, 50, 100] as BucketOptions[] diff --git a/report-viewer/src/model/Distribution.ts b/report-viewer/src/model/Distribution.ts index 2e3ec39798..f0652c92dc 100644 --- a/report-viewer/src/model/Distribution.ts +++ b/report-viewer/src/model/Distribution.ts @@ -6,20 +6,17 @@ export class Distribution { } /** - * Returns the distribution summed at every tenth percentile + * Splits the distribution into the given number of buckets */ - public splitIntoTenBuckets(): number[] { - const tenValueArray = new Array(10).fill(0) + public splitIntoBuckets(bucketCount: BucketOptions): number[] { + const bucketArray = new Array(bucketCount).fill(0) + const divisor = 100 / bucketCount for (let i = 99; i >= 0; i--) { - tenValueArray[Math.floor(i / 10)] += this._distribution[i] + bucketArray[Math.floor(i / divisor)] += this._distribution[i] } - return tenValueArray - } - - /** - * Returns the distribution summed at every percentile - */ - public splitIntoOneHundredBuckets(): number[] { - return Array.from(this._distribution) + return bucketArray } } + +type BucketOptions = 10 | 20 | 25 | 50 | 100 +export type { BucketOptions } diff --git a/report-viewer/src/model/ui/DistributionChartConfig.ts b/report-viewer/src/model/ui/DistributionChartConfig.ts index b992e2e682..33e4476b08 100644 --- a/report-viewer/src/model/ui/DistributionChartConfig.ts +++ b/report-viewer/src/model/ui/DistributionChartConfig.ts @@ -1,3 +1,4 @@ +import type { BucketOptions } from '../Distribution' import type { MetricType } from '../MetricType' /** @@ -6,5 +7,5 @@ import type { MetricType } from '../MetricType' export interface DistributionChartConfig { metric: MetricType xScale: 'linear' | 'logarithmic' - resolution: 10 | 100 + resolution: BucketOptions } From d54a6e58e5f02470c60059d501ea14a388138c14 Mon Sep 17 00:00:00 2001 From: Alexander Vogt Date: Sat, 8 Jun 2024 17:36:49 +0200 Subject: [PATCH 08/16] cahnge name from resolution to bucket count --- .../distributionDiagram/DistributionDiagram.vue | 14 +++++++------- .../DistributionDiagramOptions.vue | 7 ++++--- .../src/model/ui/DistributionChartConfig.ts | 2 +- report-viewer/src/stores/store.ts | 2 +- 4 files changed, 13 insertions(+), 12 deletions(-) diff --git a/report-viewer/src/components/distributionDiagram/DistributionDiagram.vue b/report-viewer/src/components/distributionDiagram/DistributionDiagram.vue index e29f2fc8d6..c3f2a31412 100644 --- a/report-viewer/src/components/distributionDiagram/DistributionDiagram.vue +++ b/report-viewer/src/components/distributionDiagram/DistributionDiagram.vue @@ -40,7 +40,7 @@ const props = defineProps({ const graphOptions = computed(() => store().uiState.distributionChartConfig) const distribution = computed(() => props.distributions[graphOptions.value.metric]) const distributionData = computed(() => - distribution.value.splitIntoBuckets(graphOptions.value.resolution) + distribution.value.splitIntoBuckets(graphOptions.value.bucketCount) ) const maxVal = computed(() => Math.max(...distributionData.value)) @@ -113,16 +113,16 @@ const options = computed(() => { color: graphColors.ticksAndFont.value, callback: function (reversedValue: any) { const value = distributionData.value.length - reversedValue - 1 - if (graphOptions.value.resolution <= 10) { + if (graphOptions.value.bucketCount <= 10) { return getDataPointLabel(value) } else { let labelBreakPoint = 10 - if (graphOptions.value.resolution <= 25) { + if (graphOptions.value.bucketCount <= 25) { labelBreakPoint = 5 } else { - labelBreakPoint = Math.floor(graphOptions.value.resolution / 10) + labelBreakPoint = Math.floor(graphOptions.value.bucketCount / 10) } - if (value == graphOptions.value.resolution - 1 || value % labelBreakPoint == 0) { + if (value == graphOptions.value.bucketCount - 1 || value % labelBreakPoint == 0) { return getDataPointLabel(value) } } @@ -135,7 +135,7 @@ const options = computed(() => { }, plugins: { datalabels: { - display: graphOptions.value.resolution <= 20, + display: graphOptions.value.bucketCount <= 20, color: graphColors.ticksAndFont.value, font: { weight: 'bold' as 'bold' @@ -156,7 +156,7 @@ const options = computed(() => { }) function getDataPointLabel(index: number) { - let perBucket = 100 / graphOptions.value.resolution + let perBucket = 100 / graphOptions.value.bucketCount return index * perBucket + '-' + (index * perBucket + perBucket) + '%' } diff --git a/report-viewer/src/components/distributionDiagram/DistributionDiagramOptions.vue b/report-viewer/src/components/distributionDiagram/DistributionDiagramOptions.vue index 18e5649705..ffb52474b3 100644 --- a/report-viewer/src/components/distributionDiagram/DistributionDiagramOptions.vue +++ b/report-viewer/src/components/distributionDiagram/DistributionDiagramOptions.vue @@ -22,13 +22,14 @@ /> diff --git a/report-viewer/src/model/ui/DistributionChartConfig.ts b/report-viewer/src/model/ui/DistributionChartConfig.ts index 33e4476b08..cc260dec0d 100644 --- a/report-viewer/src/model/ui/DistributionChartConfig.ts +++ b/report-viewer/src/model/ui/DistributionChartConfig.ts @@ -7,5 +7,5 @@ import type { MetricType } from '../MetricType' export interface DistributionChartConfig { metric: MetricType xScale: 'linear' | 'logarithmic' - resolution: BucketOptions + bucketCount: BucketOptions } diff --git a/report-viewer/src/stores/store.ts b/report-viewer/src/stores/store.ts index f5206e8057..e798cc207b 100644 --- a/report-viewer/src/stores/store.ts +++ b/report-viewer/src/stores/store.ts @@ -30,7 +30,7 @@ const store = defineStore('store', { distributionChartConfig: { metric: MetricType.AVERAGE, xScale: 'linear', - resolution: 10 + bucketCount: 10 } } }), From b6ef5181915958a5999e789ccb6ee8e52dd9c160 Mon Sep 17 00:00:00 2001 From: Alexander Vogt Date: Sat, 8 Jun 2024 19:12:37 +0200 Subject: [PATCH 09/16] add tests for bucket size --- report-viewer/tests/e2e/Distribution.spec.ts | 3 +- .../tests/unit/model/Distribution.test.ts | 38 +++++++++++++++++-- 2 files changed, 36 insertions(+), 5 deletions(-) diff --git a/report-viewer/tests/e2e/Distribution.spec.ts b/report-viewer/tests/e2e/Distribution.spec.ts index e284578c6b..937a6c379c 100644 --- a/report-viewer/tests/e2e/Distribution.spec.ts +++ b/report-viewer/tests/e2e/Distribution.spec.ts @@ -35,7 +35,8 @@ async function selectOptions(page: Page, options: string[]) { function getTestCombinations() { const options = [ ['Average Similarity', 'Maximum Similarity'], - ['Linear', 'Logarithmic'] + ['Linear', 'Logarithmic'], + ['10', '20', '25', '50', '100'] ] const baseOptions = options.map((o) => o[0]) diff --git a/report-viewer/tests/unit/model/Distribution.test.ts b/report-viewer/tests/unit/model/Distribution.test.ts index 022b236df6..88a7569226 100644 --- a/report-viewer/tests/unit/model/Distribution.test.ts +++ b/report-viewer/tests/unit/model/Distribution.test.ts @@ -1,15 +1,45 @@ import { describe, expect, it } from 'vitest' import { Distribution } from '@/model/Distribution' -const distribution = new Distribution([ +const distributionData = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 1, 0, 1, 2, 12, 8, 31, 61, 168, 273, 493, 923, 1544, 2244, 3163, 4309, 5373, 6343, 7177, 7445, 7292, 7023, 6130, 5091, 4056, 3025, 2052, 1442, 869, 470, 225, 109, 42, 15, 7, 0 -]) +] +const distribution = new Distribution(distributionData) describe('Distribution', () => { it('get in 10 Buckets', () => { - expect(distribution.splitIntoTenBuckets()).toEqual([0, 0, 0, 0, 0, 0, 26, 13209, 58955, 5231]) - }) + expect(distribution.splitIntoBuckets(10)).toEqual([0, 0, 0, 0, 0, 0, 26, 13209, 58955, 5231]) + }), + it('get in 100 Buckets', () => { + expect(distribution.splitIntoBuckets(100)).toEqual(distributionData) + }), + it('get in 25 Buckets', () => { + expect(distribution.splitIntoBuckets(25)).toEqual([ + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 112, 1857, 11260, 26338, 25536, 10575, + 1673, 64 + ]) + }), + it('get in 20 Buckets', () => { + expect(distribution.splitIntoBuckets(20)).toEqual([ + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 23, 1026, 12183, 33630, 25325, 5058, 173 + ]) + }), + it('get in 50 Buckets', () => { + expect(distribution.splitIntoBuckets(50)).toEqual([ + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 2, 1, 3, 20, 92, 441, 1416, 3788, 7472, 11716, 14622, 14315, 11221, 7081, 3494, 1339, 334, + 57, 7 + ]) + }), + it('all Bucket sums equal', () => { + const checkSum = distributionData.reduce((acc, val) => acc + val, 0) + const options = [10, 20, 25, 50, 100] + options.forEach((option) => { + const bucketSum = distribution.splitIntoBuckets(option).reduce((acc, val) => acc + val, 0) + expect(bucketSum).toEqual(checkSum) + }) + }) }) From ddb3ab391f0561202821fae920531e8dc26bcf2e Mon Sep 17 00:00:00 2001 From: Alex | Kronox Date: Sat, 8 Jun 2024 19:44:15 +0200 Subject: [PATCH 10/16] mark distribution test as slow --- report-viewer/tests/e2e/Distribution.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/report-viewer/tests/e2e/Distribution.spec.ts b/report-viewer/tests/e2e/Distribution.spec.ts index 937a6c379c..2983be3f75 100644 --- a/report-viewer/tests/e2e/Distribution.spec.ts +++ b/report-viewer/tests/e2e/Distribution.spec.ts @@ -2,6 +2,7 @@ import { test, expect, Page } from '@playwright/test' import { uploadFile } from './TestUtils' test('Test distribution diagram', async ({ page }) => { + test.slow() await page.goto('/') await uploadFile('progpedia-report.zip', page) From a39bcaf2d4628da48e6fc079ec9bc31b5e543e7f Mon Sep 17 00:00:00 2001 From: Alex | Kronox Date: Sat, 22 Jun 2024 16:29:12 +0200 Subject: [PATCH 11/16] deactivate animation --- .../src/components/distributionDiagram/DistributionDiagram.vue | 1 + report-viewer/tests/e2e/Distribution.spec.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/report-viewer/src/components/distributionDiagram/DistributionDiagram.vue b/report-viewer/src/components/distributionDiagram/DistributionDiagram.vue index c3f2a31412..1793356a3b 100644 --- a/report-viewer/src/components/distributionDiagram/DistributionDiagram.vue +++ b/report-viewer/src/components/distributionDiagram/DistributionDiagram.vue @@ -133,6 +133,7 @@ const options = computed(() => { } } }, + animation: false as false, plugins: { datalabels: { display: graphOptions.value.bucketCount <= 20, diff --git a/report-viewer/tests/e2e/Distribution.spec.ts b/report-viewer/tests/e2e/Distribution.spec.ts index 2983be3f75..4c525e7913 100644 --- a/report-viewer/tests/e2e/Distribution.spec.ts +++ b/report-viewer/tests/e2e/Distribution.spec.ts @@ -30,7 +30,7 @@ async function selectOptions(page: Page, options: string[]) { await distributionDiagramContainer.getByText(option, { exact: true }).click() } // This timeout is so that the screenshot is taken after the animation is finished - await page.waitForTimeout(3000) + await page.waitForTimeout(100) } function getTestCombinations() { From 138b7ddd04c2946226e5d3e061fd0f1d3dbfc780 Mon Sep 17 00:00:00 2001 From: Alex | Kronox Date: Sat, 22 Jun 2024 16:49:16 +0200 Subject: [PATCH 12/16] font size for datalabels --- .../distributionDiagram/DistributionDiagram.vue | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/report-viewer/src/components/distributionDiagram/DistributionDiagram.vue b/report-viewer/src/components/distributionDiagram/DistributionDiagram.vue index 1793356a3b..d62b14b093 100644 --- a/report-viewer/src/components/distributionDiagram/DistributionDiagram.vue +++ b/report-viewer/src/components/distributionDiagram/DistributionDiagram.vue @@ -136,10 +136,10 @@ const options = computed(() => { animation: false as false, plugins: { datalabels: { - display: graphOptions.value.bucketCount <= 20, color: graphColors.ticksAndFont.value, font: { - weight: 'bold' as 'bold' + weight: 'bold' as 'bold', + size: getDataLabelFontSize() }, anchor: 'end' as 'end', align: 'end' as 'end', @@ -160,4 +160,14 @@ function getDataPointLabel(index: number) { let perBucket = 100 / graphOptions.value.bucketCount return index * perBucket + '-' + (index * perBucket + perBucket) + '%' } + +function getDataLabelFontSize() { + if (graphOptions.value.bucketCount == 100) { + return 7 + } + if (graphOptions.value.bucketCount == 50) { + return 10 + } + return 12 +} From afb12981cb1cbe9cb37d765e273ae986a41b9933 Mon Sep 17 00:00:00 2001 From: Alex | Kronox Date: Sat, 22 Jun 2024 17:06:46 +0200 Subject: [PATCH 13/16] fix test --- report-viewer/tests/e2e/Distribution.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/report-viewer/tests/e2e/Distribution.spec.ts b/report-viewer/tests/e2e/Distribution.spec.ts index 4c525e7913..acd753ed90 100644 --- a/report-viewer/tests/e2e/Distribution.spec.ts +++ b/report-viewer/tests/e2e/Distribution.spec.ts @@ -30,7 +30,7 @@ async function selectOptions(page: Page, options: string[]) { await distributionDiagramContainer.getByText(option, { exact: true }).click() } // This timeout is so that the screenshot is taken after the animation is finished - await page.waitForTimeout(100) + await page.waitForTimeout(1000) } function getTestCombinations() { From 3ba71290b897e17a9af0642db02734186ca2708a Mon Sep 17 00:00:00 2001 From: Alex | Kronox Date: Sat, 22 Jun 2024 17:21:02 +0200 Subject: [PATCH 14/16] revert to old test timing --- report-viewer/tests/e2e/Distribution.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/report-viewer/tests/e2e/Distribution.spec.ts b/report-viewer/tests/e2e/Distribution.spec.ts index acd753ed90..2983be3f75 100644 --- a/report-viewer/tests/e2e/Distribution.spec.ts +++ b/report-viewer/tests/e2e/Distribution.spec.ts @@ -30,7 +30,7 @@ async function selectOptions(page: Page, options: string[]) { await distributionDiagramContainer.getByText(option, { exact: true }).click() } // This timeout is so that the screenshot is taken after the animation is finished - await page.waitForTimeout(1000) + await page.waitForTimeout(3000) } function getTestCombinations() { From c5334defe1b803a2d08ac6e4bd555b33c9c1a739 Mon Sep 17 00:00:00 2001 From: Alex | Kronox Date: Tue, 25 Jun 2024 18:46:57 +0200 Subject: [PATCH 15/16] reenable animation --- .../src/components/distributionDiagram/DistributionDiagram.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/report-viewer/src/components/distributionDiagram/DistributionDiagram.vue b/report-viewer/src/components/distributionDiagram/DistributionDiagram.vue index d62b14b093..dc2ef351bf 100644 --- a/report-viewer/src/components/distributionDiagram/DistributionDiagram.vue +++ b/report-viewer/src/components/distributionDiagram/DistributionDiagram.vue @@ -133,7 +133,6 @@ const options = computed(() => { } } }, - animation: false as false, plugins: { datalabels: { color: graphColors.ticksAndFont.value, From 5fee91252c508bb574b4a18988beeb40ab7f2de4 Mon Sep 17 00:00:00 2001 From: Alexander Vogt Date: Thu, 27 Jun 2024 12:43:08 +0200 Subject: [PATCH 16/16] disable animations --- .../components/distributionDiagram/DistributionDiagram.vue | 1 + report-viewer/tests/e2e/Distribution.spec.ts | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/report-viewer/src/components/distributionDiagram/DistributionDiagram.vue b/report-viewer/src/components/distributionDiagram/DistributionDiagram.vue index dc2ef351bf..d62b14b093 100644 --- a/report-viewer/src/components/distributionDiagram/DistributionDiagram.vue +++ b/report-viewer/src/components/distributionDiagram/DistributionDiagram.vue @@ -133,6 +133,7 @@ const options = computed(() => { } } }, + animation: false as false, plugins: { datalabels: { color: graphColors.ticksAndFont.value, diff --git a/report-viewer/tests/e2e/Distribution.spec.ts b/report-viewer/tests/e2e/Distribution.spec.ts index 2983be3f75..f9935ac61a 100644 --- a/report-viewer/tests/e2e/Distribution.spec.ts +++ b/report-viewer/tests/e2e/Distribution.spec.ts @@ -8,7 +8,7 @@ test('Test distribution diagram', async ({ page }) => { await uploadFile('progpedia-report.zip', page) const options = getTestCombinations() - selectOptions(page, options[0]) + await selectOptions(page, options[0]) const canvas = page.locator('canvas').first() let lastImage = await canvas.screenshot() for (const option of options.slice(1)) { @@ -30,7 +30,7 @@ async function selectOptions(page: Page, options: string[]) { await distributionDiagramContainer.getByText(option, { exact: true }).click() } // This timeout is so that the screenshot is taken after the animation is finished - await page.waitForTimeout(3000) + await page.waitForTimeout(100) } function getTestCombinations() {