Add option to disable chart animations and prevent animation when refreshing chart block

2023-01-23 15:59:58 +01:00 · 2023-01-23 15:59:58 +01:00 · f9cc910e5a
commit f9cc910e5a
parent 41f1283e9d
14 changed files with 52 additions and 9 deletions
--- a/client/web/compose/src/components/PageBlocks/ChartBase.vue
+++ b/client/web/compose/src/components/PageBlocks/ChartBase.vue
@ -83,6 +83,7 @@ export default {

    refresh () {
      this.fetchChart({ force: true }).then(() => {
+        this.chart.config.noAnimation = true
        this.key++
      })
    },
--- a/client/web/compose/src/components/PageBlocks/base.vue
+++ b/client/web/compose/src/components/PageBlocks/base.vue
@ -80,7 +80,7 @@ export default {
      },
    },

-    allowsRefresh () {
+    autoRefreshEnabled () {
      return this.options.refreshRate >= 5 && ['page', 'page.record'].includes(this.$route.name)
    },
  },
@ -97,7 +97,7 @@ export default {
     * You should attach :key="key" to it and increment it in the refreshFunction
     */
    refreshBlock (refreshFunction) {
-      if (!this.allowsRefresh || this.refreshInterval) return
+      if (!this.autoRefreshEnabled || this.refreshInterval) return

      const interval = setInterval(() => {
        refreshFunction()
--- a/client/web/compose/src/views/Admin/Charts/Edit.vue
+++ b/client/web/compose/src/views/Admin/Charts/Edit.vue
@ -106,6 +106,19 @@
                        />
                      </template>
                    </b-form-group>
+
+                    <b-form-group>
+                      <b-form-checkbox
+                        v-model="chart.config.noAnimation"
+                        :value="false"
+                        :unchecked-value="true"
+                        switch
+                      >
+                        {{ $t('edit.animation.enabled') }}
+                      </b-form-checkbox>
+                    </b-form-group>
+
+                    <hr>
                  </div>

                  <!-- Some charts support multiple reports -->
--- a/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Chart.vue
+++ b/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Chart.vue
@ -7,7 +7,9 @@
        {{ $t('display-element:chart.configurator.general') }}
      </h5>

-      <b-row>
+      <b-row
+        align-v="stretch"
+      >
        <b-col
          cols="12"
          sm="6"
@ -37,9 +39,7 @@
            />
          </b-form-group>
        </b-col>
-      </b-row>

-      <b-row>
        <b-col
          cols="12"
          sm="6"
@ -88,6 +88,22 @@
            </template>
          </b-form-group>
        </b-col>
+
+        <b-col
+          cols="12"
+          sm="6"
+          class="d-flex flex-column justify-content-center"
+        >
+          <b-form-checkbox
+            v-model="options.noAnimation"
+            :value="false || undefined"
+            :unchecked-value="true"
+            switch
+            class="mt-3 pt-2"
+          >
+            {{ $t('display-element:chart.configurator.animation.enabled') }}
+          </b-form-checkbox>
+        </b-col>
      </b-row>
      <hr>
    </div>
--- a/lib/js/src/compose/types/chart/base.ts
+++ b/lib/js/src/compose/types/chart/base.ts
@ -300,8 +300,9 @@ export class BaseChart {

  defConfig (): ChartConfig {
    return Object.assign({}, {
-      colorScheme: undefined,
+      colorScheme: '',
      reports: [this.defReport()],
+      noAnimation: false,
    })
  }

--- a/lib/js/src/compose/types/chart/chart.ts
+++ b/lib/js/src/compose/types/chart/chart.ts
@ -91,9 +91,10 @@ export default class Chart extends BaseChart {
  }

  makeOptions (data: any): any {
-    const { reports = [], colorScheme } = this.config
+    const { reports = [], colorScheme, noAnimation = false } = this.config

    const options: any = {
+      animation: !noAnimation,
      series: [],
      xAxis: [],
      yAxis: [],
--- a/lib/js/src/compose/types/chart/funnel.ts
+++ b/lib/js/src/compose/types/chart/funnel.ts
@ -85,7 +85,7 @@ export default class FunnelChart extends BaseChart {
  }

  makeOptions (data: any) {
-    const { colorScheme } = this.config
+    const { colorScheme, noAnimation = false } = this.config
    const { labels, datasets = [], tooltip } = data
    const colors = getColorschemeColors(colorScheme)

@ -93,6 +93,7 @@ export default class FunnelChart extends BaseChart {
    const labelFormatter = `{c}${tooltip.relative ? ' ({d}%)' : ''}`

    return {
+      animation: !noAnimation,
      textStyle: {
        fontFamily: 'Poppins-Regular',
      },
--- a/lib/js/src/compose/types/chart/gauge.ts
+++ b/lib/js/src/compose/types/chart/gauge.ts
@ -66,7 +66,7 @@ export default class GaugeChart extends BaseChart {
  }

  makeOptions (data: any) {
-    const { colorScheme } = this.config
+    const { colorScheme, noAnimation = false } = this.config
    const { datasets = [] } = data
    const { steps = [], name, value, max, tooltip } = datasets.find(({ value }: any) => value) || datasets[0]
    const colors = getColorschemeColors(colorScheme)
@ -76,6 +76,7 @@ export default class GaugeChart extends BaseChart {
    })

    return {
+      animation: !noAnimation,
      textStyle: {
        fontFamily: 'Poppins-Regular',
      },
--- a/lib/js/src/compose/types/chart/util.ts
+++ b/lib/js/src/compose/types/chart/util.ts
@ -103,6 +103,7 @@ export interface Report {
 export interface ChartConfig {
  reports?: Array<Report>;
  colorScheme?: string;
+  noAnimation?: boolean;
 }

 export const aggregateFunctions = [
--- a/lib/js/src/reporter/types/display-elements/chart/base.ts
+++ b/lib/js/src/reporter/types/display-elements/chart/base.ts
@ -51,6 +51,7 @@ export class ChartOptions {
  public title = ''
  public type = 'bar'
  public colorScheme = ''
+  public noAnimation = false
  public source = ''
  public datasources: Array<FrameDefinition> = []

@ -98,6 +99,7 @@ export class ChartOptions {
    if (!o) return

    Apply(this, o, String, 'title', 'type', 'colorScheme', 'source')
+    Apply(this, o, Boolean, 'noAnimation')

    if (o.datasources) {
      this.datasources = o.datasources
--- a/lib/js/src/reporter/types/display-elements/chart/basic.ts
+++ b/lib/js/src/reporter/types/display-elements/chart/basic.ts
@ -176,6 +176,7 @@ export class BasicChartOptions extends ChartOptions {
    }

    return {
+      animation: !this.noAnimation,
      title: {
        text: this.title,
        left: 'center',
--- a/lib/js/src/reporter/types/display-elements/chart/funnel.ts
+++ b/lib/js/src/reporter/types/display-elements/chart/funnel.ts
@ -25,6 +25,7 @@ export class FunnelChartOptions extends ChartOptions {
    const colors = getColorschemeColors(this.colorScheme)

    return {
+      animation: !this.noAnimation,
      title: {
        text: this.title,
        left: 'center',
--- a/locale/en/corteza-webapp-compose/chart.yaml
+++ b/locale/en/corteza-webapp-compose/chart.yaml
@ -13,6 +13,8 @@ general:
    handle: handle (a - z, 0 - 9, underscore, dash)
    invalid-handle-characters: Should be at least 2 characters long and start with a letter. Can contain only letters, numbers, dashes, underscores and dots
 edit:
+  animation:
+    enabled: Animation enabled
  dimension:
    calculateLabelCount: Calculate how many labels can be shown
    defaultValueFootnote: Use this value for missing dimension values
--- a/locale/en/corteza-webapp-reporter/display-element.yaml
+++ b/locale/en/corteza-webapp-reporter/display-element.yaml
@ -15,6 +15,8 @@ chart:
    place-axis-on-right-side: Place axis on the right side
    skip-missing-values: Skip missing values
    step-size: Step size
+    animation:
+      enabled: Animation enabled
    time:
      label: Time
      unit: