Uploaded image for project: 'Nuxeo Elements'
  1. Nuxeo Elements
  2. ELEMENTS-890

WebUI charts are not configurable

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Resolved
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 2.4.4, 3.0.0
    • Component/s: UI
    • Release Notes Summary:
      WebUI charts are configurable.
    • Backlog priority:
      600
    • Sprint:
      nxGang Sprint 11.1.5
    • Story Points:
      1

      Description

      Nuxeo analytics itself thinks charts are configurable , they pass an options attribute. See nuxeo-repository-analytics.html

      <chart-pie . . .
        options='{ "legend": { "display": true, "position": "bottom", "labels": { "boxWidth": 12 } }, "animation": false }'>
      </chart-pie>
      

      Unfortunately, chart-pie options are hard coded and vulcanized (I don't know which source code file, so the followiing is extracted from elements.html):

      <script>
          class ChartPie extends ChartBehaviors.ResizeBehavior(ChartBehaviors.ContextBehavior(ChartBehaviors.ChartPropertyBehavior(Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element)))) {
      
            static get is() { return 'chart-pie'; }
      
            ready() {
              super.ready();
              this.options = {
                legend: {
                  display: true,
                  position: 'bottom',
                  labels: {
                    boxWidth: 12
                  }
                },
                animation: false
              };
              this._setType('pie');
            }
      

      This is a suggested fix (for my demos I'm changing elements.html, don't want to fork and change and deploy a fixed version of webUI):

      <script>
          class ChartPie extends ChartBehaviors.ResizeBehavior(ChartBehaviors.ContextBehavior(ChartBehaviors.ChartPropertyBehavior(Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element)))) {
      
            static get is() { return 'chart-pie'; }
      
            ready() {
              super.ready();
              let finalOptions = {
                legend: {
                  display: true,
                  position: 'bottom',
                  labels: {
                    boxWidth: 12
                  }
                },
                animation: false
              };
              if(!this.options) {
                this.options = {};
              }
              Object.assign(finalOptions, this.options);
              this.options = finalOptions;
              this._setType('pie');
            }
      

      Set priority to "major" because being able to build/display analytics with customized charts and reusing what we have will be a huge time saver (alternative: reinvent the wheel)

      I'm using the plural form "cartS", but did not check other graphs so far)

        Attachments

          Issue Links

            Activity

              People

              • Votes:
                0 Vote for this issue
                Watchers:
                4 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 2 hours
                  2h