feat: create ng-ovh-chart component

packages/components/ng-ovh-chart/LICENSE

@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2013-present, OVH SAS
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of the copyright holders nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDERS OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

packages/components/ng-ovh-chart/README.md

@@ -0,0 +1,44 @@
+# ng-ovh-chart
+
+> ChartJS library wrapper for AngularJS.
+
+## Install
+
+```sh
+$ yarn add @ovh-ux/ng-ovh-chart
+```
+
+## Usage
+
+```js
+import angular from 'angular';
+import ngOvhChart from '@ovh-ux/ng-ovh-chart';
+
+angular.module('myApp', [ngOvhChart]);
+```
+
+### Directive
+
+_Example simple configuration_
+
+```html
+<div
+  data-chart
+  data-chartjs="$ctrl.chartJsConfig"
+  data-auto-reload="true"
+></div>
+```
+
+## Test
+
+```sh
+$ yarn test
+```
+
+## Contributing
+
+Always feel free to help out! Whether it's [filing bugs and feature requests](https://github.com/ovh/manager/issues/new) or working on some of the [open issues](https://github.com/ovh/manager/issues), our [contributing guide](https://github.com/ovh/manager/blob/master/CONTRIBUTING.md) will help get you started.
+
+## License
+
+[BSD-3-Clause](LICENSE) © OVH SAS

packages/components/ng-ovh-chart/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@ovh-ux/ng-ovh-chart",
+  "version": "1.0.0",
+  "private": true,
+  "description": "ChartJS library wrapper for AngularJS",
+  "keywords": [
+    "angularjs",
+    "chart"
+  ],
+  "homepage": "https://github.com/ovh/manager/tree/master/packages/components/ng-ovh-chart#readme",
+  "bugs": {
+    "url": "https://github.com/ovh/manager/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ovh/manager.git",
+    "directory": "packages/components/ng-ovh-chart"
+  },
+  "license": "BSD-3-Clause",
+  "author": "OVH SAS",
+  "type": "module",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "browser": "./dist/umd/ng-ovh-chart.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rollup -c --environment BUILD:production",
+    "dev": "rollup -c --environment BUILD:development",
+    "dev:watch": "yarn run dev --watch",
+    "prepare": "yarn run build",
+    "start": "lerna exec --stream --scope='@ovh-ux/ng-ovh-chart' --include-dependencies -- yarn run build",
+    "start:dev": "lerna exec --stream --scope='@ovh-ux/ng-ovh-chart' --include-dependencies -- yarn run dev",
+    "start:watch": "lerna exec --stream --parallel --scope='@ovh-ux/ng-ovh-chart' --include-dependencies -- yarn run dev:watch"
+  },
+  "dependencies": {
+    "lodash": "^4.17.15"
+  },
+  "devDependencies": {
+    "@ovh-ux/component-rollup-config": "^13.0.1"
+  },
+  "peerDependencies": {
+    "angular": "~1.6",
+    "chart.js": "^4.4.2",
+    "chartjs-adapter-date-fns": "^3.0.0",
+    "chartjs-plugin-zoom": "^2.0.1",
+    "date-fns": "^2.24.0"
+  }
+}

packages/components/ng-ovh-chart/rollup.config.js

@@ -0,0 +1,28 @@
+import rollupConfig from '@ovh-ux/component-rollup-config';
+
+const config = rollupConfig({
+  input: './src/index.js',
+});
+
+const outputs = [
+  config.es({
+    output: {
+      sourcemap: false,
+    },
+  }),
+];
+
+if (process.env.BUILD === 'production') {
+  outputs.push(config.cjs());
+  outputs.push(
+    config.umd({
+      output: {
+        globals: {
+          angular: 'angular',
+        },
+      },
+    }),
+  );
+}
+
+export default outputs;

packages/manager/modules/manager-components/src/chartjs/chartjs.constants.js → packages/components/ng-ovh-chart/src/constants.js

@@ -40,17 +40,19 @@ export const CHARTJS = {
     },
     options: {
       scales: {
-        yAxes: [],
-        xAxes: [],
+        y: {},
+        x: {},
       },
       elements: {
         point: {
           radius: 0,
         },
       },
-      legend: {
-        position: 'bottom',
-        display: true,
+      plugins: {
+        legend: {
+          position: 'bottom',
+          display: true,
+        },
       },
     },
   },

packages/manager/modules/manager-components/src/chartjs/chartjs.directive.js → packages/components/ng-ovh-chart/src/directive.js

@@ -1,14 +1,14 @@
 import set from 'lodash/set';
 import uniqueId from 'lodash/uniqueId';
-import moment from 'moment';
-import Chart from 'chart.js/dist/Chart';
-
-import template from './chartjs.html';
+import Chart from 'chart.js/auto';
+import zoomPlugin from 'chartjs-plugin-zoom';
+import 'chartjs-adapter-date-fns';
+import template from './template.html';
 
 export default /* @ngInject */ () => ({
   restrict: 'A',
   scope: {
-    pciChartjs: '=',
+    chartjs: '=',
     utils: '=?',
     autoReload: '=?',
   },
@@ -17,38 +17,32 @@ export default /* @ngInject */ () => ({
   template,
   link(scope, element, attrs, controller) {
     const canvas = element.children().get(0);
-    canvas.id = uniqueId('pciChartjs');
+    canvas.id = uniqueId('chartjs');
     set(controller, 'ctx', canvas.getContext('2d'));
   },
-  controller: /* @ngInject */ function directiveController($scope, $translate) {
-    const lang = $translate.use();
-    let language;
-    if (['en_GB', 'es_US', 'fr_CA'].includes(lang)) {
-      language = lang.toLowerCase().replace('_', '-');
-    } else {
-      [language] = lang.split('_');
-    }
-    moment.locale(language);
+  controller: /* @ngInject */ function directiveController($scope) {
+    Chart.register(zoomPlugin);
+
     this.createChart = function createChart(data) {
       if (this.chartInstance) {
         this.chartInstance.destroy();
       }
-      this.chartInstance = new Chart(this.ctx, data || this.pciChartjs);
+      this.chartInstance = new Chart(this.ctx, data || this.chartjs);
     };
 
     this.$onInit = function $onInit() {
       if (this.autoReload) {
-        $scope.$watch('$ctrl.pciChartjs', (data) => {
+        $scope.$watch('$ctrl.chartjs', (data) => {
           if (data) {
             this.utils.refresh();
           }
         });
 
-        $scope.$watchCollection('$ctrl.pciChartjs.data.datasets', () => {
+        $scope.$watchCollection('$ctrl.chartjs.data.datasets', () => {
           this.utils.refresh();
         });
 
-        $scope.$watchCollection('$ctrl.pciChartjs.data', () => {
+        $scope.$watchCollection('$ctrl.chartjs.data', () => {
           this.utils.refresh();
         });
       }
@@ -58,7 +52,7 @@ export default /* @ngInject */ () => ({
           if (this.chartInstance) {
             this.chartInstance.update();
           } else {
-            this.createChart(this.pciChartjs);
+            this.createChart(this.chartjs);
           }
         },
       };

packages/manager/modules/manager-components/src/chartjs/chartjs.factory.js → packages/components/ng-ovh-chart/src/factory.js

@@ -1,15 +1,13 @@
 import assignIn from 'lodash/assignIn';
-import head from 'lodash/head';
-import isUndefined from 'lodash/isUndefined';
 import last from 'lodash/last';
 import merge from 'lodash/merge';
 import findIndex from 'lodash/findIndex';
 import uniqueId from 'lodash/uniqueId';
 import angular from 'angular';
 
-export default /* @ngInject */ (PCI_CHARTS) => {
+export default /* @ngInject */ (CHARTS) => {
   const ChartjsFactory = function ChartjsFactory(data) {
-    assignIn(this, angular.copy(PCI_CHARTS.squeleton), data);
+    assignIn(this, angular.copy(CHARTS.squeleton), data);
   };
 
   /**
@@ -27,10 +25,11 @@ export default /* @ngInject */ (PCI_CHARTS) => {
           label: name,
           data,
         },
-        PCI_CHARTS.colors[this.data.datasets.length % PCI_CHARTS.colors.length],
+        CHARTS.colors[this.data.datasets.length % CHARTS.colors.length],
         opts.dataset,
       ),
     );
+
     return last(this.data.datasets);
   };
 
@@ -58,7 +57,7 @@ export default /* @ngInject */ (PCI_CHARTS) => {
           label: name,
           data,
         },
-        PCI_CHARTS.colors[datasetIndex % PCI_CHARTS.colors.length],
+        CHARTS.colors[datasetIndex % CHARTS.colors.length],
         options.dataset,
       );
       this.data.hash = uniqueId();
@@ -76,58 +75,44 @@ export default /* @ngInject */ (PCI_CHARTS) => {
     name,
     callback,
   ) {
-    if (!this.options.tooltips) {
-      this.options.tooltips = {};
+    if (!this.options.plugins.tooltip) {
+      this.options.plugins.tooltip = {};
     }
-    if (!this.options.tooltips.callbacks) {
-      this.options.tooltips.callbacks = {};
+    if (!this.options.plugins.tooltip.callbacks) {
+      this.options.plugins.tooltip.callbacks = {};
     }
-    this.options.tooltips.callbacks[name] = callback;
+    this.options.plugins.tooltip.callbacks[name] = callback;
   };
 
   /**
    * Set axis options (http://www.chartjs.org/docs/latest/axes/)
    * @param           {String} axis    One of yAxes or xAxes
    * @param           {object} options Options to merge
-   * @param {Number|undefined} index Index of axis or all
    */
   ChartjsFactory.prototype.setAxisOptions = function setAxisOptions(
     axis,
     options,
-    index,
   ) {
-    if (isUndefined(index)) {
-      this.options.scales[axis].forEach((data) => {
-        merge(data, options);
-      });
-    } else {
-      merge(this.options.scales[index], options);
-    }
+    merge(this.options.scales[axis], options);
   };
 
   /**
    * Set title on the Y Label
    * @param {String} label Label to set
    */
   ChartjsFactory.prototype.setYLabel = function setYLabel(label) {
-    if (
-      this.options.scales.yAxes.length &&
-      head(this.options.scales.yAxes) &&
-      head(this.options.scales.yAxes).scaleLabel
-    ) {
-      this.options.scales.yAxes[0].scaleLabel.labelString = label;
-    }
+    this.options.scales.y.title.text = label;
   };
 
   /**
    * Set title of the chart
    * @param {String} label Label to set
    */
   ChartjsFactory.prototype.setTitle = function setTitle(title) {
-    if (!this.options.title) {
-      this.options.title = { display: true };
+    if (!this.options.plugins.title) {
+      this.options.plugins.title = { display: true };
     }
-    this.options.title.text = title;
+    this.options.plugins.title.text = title;
   };
 
   return ChartjsFactory;

packages/components/ng-ovh-chart/src/index.js

@@ -0,0 +1,15 @@
+import angular from 'angular';
+
+import { CHARTJS } from './constants';
+import chartDirective from './directive';
+import chartFactory from './factory';
+
+const moduleName = 'ngOvhChart';
+
+angular
+  .module(moduleName, [])
+  .constant('CHARTS', CHARTJS)
+  .directive('chart', chartDirective)
+  .factory('ChartFactory', chartFactory);
+
+export default moduleName;

packages/manager/apps/carrier-sip/package.json

@@ -50,7 +50,8 @@
     "angular-ui-bootstrap": "~1.3.3",
     "angular-validation-match": "^1.9.0",
     "bloodhound-js": "^1.2.3",
-    "chart.js": "^2.8.0",
+    "chart.js": "^4.4.2",
+    "chartjs-adapter-date-fns": "^3.0.0",
     "clipboard": "^2.0.4",
     "core-js": "^3.6.5",
     "flatpickr": "^4.6.3",