New release - release/components-w22

CONTRIBUTORS

@@ -15,10 +15,13 @@ Adrien Carreira <adrien@xcid.fr>
 Alvéric Alie
 Alexandre G.-Raymond <alex@ndre.gr>
 Alex Boungnaseng <alex.boungnaseng.ext@ovhcloud.com>
+Amandine Dectot <amandine.dectot.ext@ovhcloud.com>
+Antony Marion <antony.marion.ext@ovhcloud.com>
 Anoop N <anoop.n@ovhcloud.com>
 Antoine Leblanc <antoine.leblanc@ovhcloud.com>
 Axel Peter
 Benjamin Coenen
+Benjamin Lepine
 Benjamin Maisonnas <ben@wainei.net>
 Benjamin Ziehms <benjaminherlin@gmail.com>
 Camille Gicquel
@@ -28,7 +31,7 @@ Cheikh Kane Diallo
 Chloe Renaud
 Christophe Rannou
 Cyril Biencourt <cyril.biencourt@ovhcloud.com>
-Cyrille Bourgois <cyrille.bourgois@ovhcloud.com>
+Cyrille Bourgois
 Cyrille Meichel
 David Arsène <david.arsene.ext@ovhcloud.com>
 David Krolak <david.krolak@ovhcloud.com>
@@ -71,11 +74,13 @@ Mathieu Dupont
 Mathieu Garcia <mathieu.garcia@ovhcloud.com>
 Mathieu Tremblay
 Matthias Lachevre <matthias.lachevre@ovhcloud.com>
+Maxime Bajeux <maxime.bajeux.ext@ovhcloud.com>
 Maxime Feron <maxime.feron@ovhcloud.com>
 Mohammed Zahaf
 Nicolas Baptista
 Nicolas Pierre-Charles <nicolas.pierre-charles.ext@ovhcloud.com>
 Nicolas Pennec
+Omar Alkabouss Moussana <omar.alkabouss-moussana.ext@ovhcloud.com>
 Pierre De Paepe <pierre.de-paepe@ovhcloud.com>
 Pierre Gronlier <pierre@gronlier.fr>
 Pierre Kuhner <pierre.kuhner@ovhcloud.com>
@@ -85,6 +90,8 @@ Ravindra Adireddy
 Rémi Collignon-Ducret
 Romain Fougier
 Sachin Ramesh <sachin.ramesh@ovhcloud.com>
+Selmen Akrmi <selmen.akrmi.ext@ovhcloud.com>
+Soufien Mhelhali <soufien.mhelhali.ext@ovhcloud.com>
 Stephanie Moallic <stephanie.moallic@ovhcloud.com>
 Steeve Vanderstocken <steeve.vanderstocken@ovhcloud.com>
 Steven Guiheux <steven.guiheux+github@gmail.com>
@@ -94,6 +101,7 @@ Thibaut Rousseau <thibaut.rousseau.44@gmail.com>
 Thomas SOËTE <thomas.soete@ovhcloud.com>
 Varun Shivaprasad
 Vikash Singh
+Vincent Bonmarchand <vincent.bonmarchand.ext@ovhcloud.com>
 Vincent Casse <vincent@casse.me>
 Wassim DHIF <wassim.dhif@ovhcloud.com>
 Yann Lojewski <yann.lojewski.ext@ovhcloud.com>

MAINTAINERS

@@ -15,16 +15,17 @@ Amandine Dectot <amandine.dectot.ext@ovhcloud.com>
 Anoop N <anoop.n@ovhcloud.com>
 Antony Marion <antony.marion.ext@ovhcloud.com>
 Anthony Cavalloni <anthony.cavalloni@ovhcloud.com>
-Baptiste Lemoine <baptiste.lemoine.ext@ovhcloud.com>
-Benjamin Lépine <benjamin.lepine.ext@ovhcloud.com>
-Bruno Marques <bruno.marques.ext@ovhcloud.com>
 Cyril Biencourt <cyril.biencourt@ovhcloud.com>
 David Arsène <david.arsene.ext@ovhcloud.com>
 Guillaume Hyenne <guillaume.hyenne@ovhcloud.com>
 Jacques Larique <jacques.larique.ext@ovhcloud.com>
 Lionel Bueno <lionel.bueno.ext@ovhcloud.com>
+Maxime Bajeux <maxime.bajeux.ext@ovhcloud.com>
 Nicolas Pierre-Charles <nicolas.pierre-charles.ext@ovhcloud.com>
+Omar Alkabouss Moussana <omar.alkabouss-moussana.ext@ovhcloud.com>
 Quentin Pavy <quentin.pavy.ext@ovhcloud.com>
 Sachin Ramesh <sachin.ramesh@ovhcloud.com>
+Soufien Mhelhali <soufien.mhelhali.ext@ovhcloud.com>
 Steeve Vanderstocken <steeve.vanderstocken@ovhcloud.com>
+Vincent Bonmarchand <vincent.bonmarchand.ext@ovhcloud.com>
 Yann Lojewski <yann.lojewski.ext@ovhcloud.com>

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);
           }
         },
       };