refac: remove bower dependency, update example and readme

alexstanbury · Sep 27, 2018 · 5406e74 · 5406e74
1 parent b5e1a96
commit 5406e74
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 90 deletions.
diff --git a/README.md b/README.md
@@ -12,79 +12,86 @@ Install using npm:
 
 `npm install chartist-plugin-axistitle`
 
-Or using bower
-
-`bower install chartist-plugin-axistitle`
-
-
 ## Available options and their defaults
 
 ```javascript
 var defaultOptions = {
-  // The title to be displayed on the axis. If at least one axis title is not supplied then an error is thrown. 
+  // The title to be displayed on the axis. If at least one axis title is not supplied then an error is thrown.
   // This can also be passed a function to enable simple updating of the title if your chart data changes.
-  axisTitle: '',
-  
-  // One or more class names to be added to the axis title. 
-  // Multiple class names should be separated by a space. 
+  axisTitle: "",
+
+  // One or more class names to be added to the axis title.
+  // Multiple class names should be separated by a space.
   // This can also be passed a function to enable simple updating of the classes if your chart data changes.
-  axisClass: 'ct-axis-title',
-  
-  // How much to offset the title by. 
-  // Please note, x and y offset values for axisY are flipped due to the rotation of the axisY title by 90 degrees. 
+  axisClass: "ct-axis-title",
+
+  // How much to offset the title by.
+  // Please note, x and y offset values for axisY are flipped due to the rotation of the axisY title by 90 degrees.
   // Therefore changing the x value moves up/down the chart, while changing y moves left/right.
-  offset: {x:0, y:0},
-  
+  offset: { x: 0, y: 0 },
+
   // Defines the anchoring of the title text. Possible values are 'start', 'end' and 'middle'.
-  textAnchor: 'middle',
+  textAnchor: "middle",
 
   // Whether to flip the direction of the text. Note - This can only be used on axis Y.
-  flipTitle : false
-
+  flipTitle: false
 };
 ```
 
 ## Sample usage
 
 ```javascript
-var chart = new Chartist.Line('.ct-chart', {
-            labels: ['0-15', '16-30', '31-45', '46-60', '61-75', '76-90', '91-105', '106-120'],
-                series: [[1, 3, 7, 12, 1, 2, 1, 0]]
-            }, {
-                chartPadding: {
-                    top: 20,
-                    right: 0,
-                    bottom: 20,
-                    left: 0
-                },
-                axisY: {
-                    onlyInteger: true
-                },
-                plugins: [
-                    Chartist.plugins.ctAxisTitle({
-                        axisX: {
-                            axisTitle: 'Time (mins)',
-                            axisClass: 'ct-axis-title',
-                            offset: {
-                                x: 0,
-                                y: 50
-                            },
-                            textAnchor: 'middle'
-                        },
-                        axisY: {
-                            axisTitle: 'Goals',
-                            axisClass: 'ct-axis-title',
-                            offset: {
-                                x: 0,
-                                y: -1
-                            },
-                            flipTitle: false
-                        }
-                    })
-                ]
-            });
+var chart = new Chartist.Line(
+  ".ct-chart",
+  {
+    labels: [
+      "0-15",
+      "16-30",
+      "31-45",
+      "46-60",
+      "61-75",
+      "76-90",
+      "91-105",
+      "106-120"
+    ],
+    series: [[1, 3, 7, 12, 1, 2, 1, 0]]
+  },
+  {
+    chartPadding: {
+      top: 20,
+      right: 0,
+      bottom: 20,
+      left: 0
+    },
+    axisY: {
+      onlyInteger: true
+    },
+    plugins: [
+      Chartist.plugins.ctAxisTitle({
+        axisX: {
+          axisTitle: "Time (mins)",
+          axisClass: "ct-axis-title",
+          offset: {
+            x: 0,
+            y: 50
+          },
+          textAnchor: "middle"
+        },
+        axisY: {
+          axisTitle: "Goals",
+          axisClass: "ct-axis-title",
+          offset: {
+            x: 0,
+            y: -1
+          },
+          flipTitle: false
+        }
+      })
+    ]
+  }
+);
 ```
 
 ## Example
 
-Run/edit the example.html file to see the plugin in action
+Install using `npm install` then run/edit the example.html file to see the plugin in action
diff --git a/bower.json b/bower.json
diff --git a/example.html b/example.html
@@ -1,20 +1,21 @@
 <!DOCTYPE html>
 <html>
-  <head>
+
+<head>
     <title>My first Chartist Tests</title>
-    <link rel="stylesheet"
-          href="bower_components/chartist/dist/chartist.min.css">
-  </head>
-  <body>
+    <link rel="stylesheet" href="node_modules/chartist/dist/chartist.min.css">
+</head>
+
+<body>
     <div class="ct-chart ct-perfect-fourth"></div>
 
-    <script src="bower_components/chartist/dist/chartist.js"></script>
+    <script src="node_modules/chartist/dist/chartist.js"></script>
     <script src="src/scripts/chartist-plugin-axistitle.js"></script>
     <script>
-     var chart = new Chartist.Line('.ct-chart', {
+        var chart = new Chartist.Line('.ct-chart', {
             labels: ['0-15', '16-30', '31-45', '46-60', '61-75', '76-90'],
-                series: [[1, 3, 7, 12, 1, 2, 1, 0]]
-            }, {
+            series: [[1, 3, 7, 12, 1, 2, 1, 0]]
+        }, {
                 chartPadding: {
                     top: 20,
                     right: 0,
@@ -47,6 +48,7 @@
                     })
                 ]
             });
-          </script>
-  </body>
+    </script>
+</body>
+
 </html>
diff --git a/package.json b/package.json
@@ -11,15 +11,22 @@
   "bugs": {
     "url": "https://github.com/alexstanbury/chartist-plugin-axistitle/issues"
   },
-  "keywords": ["chartist", "plugin"],
-  "files": ["dist", "LICENSE", "package.json", "README.md"],
+  "keywords": [
+    "chartist",
+    "plugin"
+  ],
+  "files": [
+    "dist",
+    "LICENSE",
+    "package.json",
+    "README.md"
+  ],
   "main": "dist/chartist-plugin-axistitle.js",
   "browser": "dist/chartist-plugin-axistitle.js",
   "licenses": [
     {
       "type": "MIT",
-      "url":
-        "https://github.com/alexstanbury/chartist-plugin-axistitle/blob/master/LICENSE"
+      "url": "https://github.com/alexstanbury/chartist-plugin-axistitle/blob/master/LICENSE"
     }
   ],
   "dependencies": {},
@@ -45,8 +52,7 @@
     "test": "grunt test"
   },
   "config": {
-    "banner":
-      "/* chartist-plugin-axistitle <%= pkg.version %>\n * Copyright © <%= year %> Alex Stanbury\n * Free to use under the WTFPL license.\n * http://www.wtfpl.net/\n */\n",
+    "banner": "/* chartist-plugin-axistitle <%= pkg.version %>\n * Copyright © <%= year %> Alex Stanbury\n * Free to use under the WTFPL license.\n * http://www.wtfpl.net/\n */\n",
     "src": "src",
     "dist": "dist",
     "tmp": ".tmp",