Large refactoring of how line rollovers function under the hood. Prim…

…arily about moving away from using mg-line1-color as a selector. getting rid of the -color part of the class means that the selectors for rollovers are purely about selection, not color. This allows us to do things like color lines using a new argument: colors, which takes an array, and colors the lines as they are ordered by accessor or by placement in the data argument. This is primarily targeted toward #503, but required this refactoring and reworking so that nothing else breaks.
metricsgraphics · Oct 8, 2015 · 8bf8f2a · 8bf8f2a
1 parent 85c6e3d
commit 8bf8f2a
Show file tree

Hide file tree

Showing 8 changed files with 336 additions and 102 deletions.
diff --git a/dist/metricsgraphics.js b/dist/metricsgraphics.js
diff --git a/dist/metricsgraphics.min.js b/dist/metricsgraphics.min.js
diff --git a/examples/charts/lines.htm b/examples/charts/lines.htm
@@ -131,8 +131,41 @@
                 </div>
             </div>
 
+            <div class='row trunk-section'>
+                <div class='col-lg-7 text-center' id='custom-color'></div>
+                <div class='col-lg-5'>
+
+<pre><code class='javascript'>MG.data_graphic({
+    title: "Singleton",
+    description: "Handling a solitary data point.",
+    data: [{'date': new Date('2015-03-05T21:00:00Z'), 'value': 12000}],
+    width: 600,
+    height: 200,
+    right: 40,
+    target: '#singleton'
+});</code></pre>
+
+                </div>
+            </div>
 
 <script>
+
+d3.json('data/fake_users1.json', function(data) {
+    data = MG.convert.date(data, 'date');
+    MG.data_graphic({
+        title: "Changing Single Line Color",
+        description: "For single line charts, there are two simple ways to change a line color. The first is to change the css (described on the wiki). The other is to specify a color value using color: <em>string</em> or colors: <em>string</em>.",
+        data: data,
+        width: 600,
+        height: 200,
+        right: 40,
+        color: '#8C001A',
+        target: 'div#custom-color',
+        x_accessor: 'date',
+        y_accessor: 'value'
+    });
+});
+
 MG._hooks = {};
 d3.json('data/fake_users1.json', function(data) {
     data = MG.convert.date(data, 'date');

diff --git a/examples/charts/multilines.htm b/examples/charts/multilines.htm
@@ -156,7 +156,42 @@
 });</code></pre>
 
     </div>
-</div>       
+</div>
+
+
+<div class='row trunk-section'>
+    <div class='col-lg-7 text-center' id='custom-colors'></div>
+    <div class='col-lg-5'>
+        <div class='data-column'><a href='data/fake_users3.json'>data</a></div>
+
+<pre><code class='javascript'>d3.json('data/fake_users2.json', function(data){
+    for (var i = 0; i < data.length; i++) {
+        data[i] = MG.convert.date(data[i], 'date');
+    };
+    MG.data_graphic({
+        title: "Custom Line Coloring (experimental / subject to change)",
+        description: "By passing in an array of hex / rgb / rgba / html strings, you can specify the colors of the lines. NOTE: this feature may have an API change before it is fully in Metrics Graphics. Use at your own risk.",
+        data: [data[0], data[1], data[2]],
+        width: 600,
+        height: 200,
+        right: 40,
+        target: '#custom-colors',
+        legend: ['Team A','Team B','Team C'],
+        legend_target: 'div#custom-color-key',
+        colors: ['blue', 'rgb(255,100,43)', '#CCCCFF'],
+        aggregate_rollover: true
+    });
+})
+</code></pre>
+
+    </div>
+</div>  
+<div class='row'>
+    <div class='col-lg-7 text-center' id='custom-color-key'></div>
+    <div class='col-lg-5'></div>
+</div>
+
+
 
 <script>
 MG._hooks = {};
@@ -268,4 +303,23 @@
         target: '#multi-labelled'
     });
 });
+
+d3.json('data/fake_users2.json', function(data){
+    for (var i = 0; i < data.length; i++) {
+        data[i] = MG.convert.date(data[i], 'date');
+    };
+    MG.data_graphic({
+        title: "Custom Line Coloring (experimental / subject to change)",
+        description: "By passing in an array of hex / rgb / rgba / html strings, you can specify the colors of the lines. NOTE: this feature may have an API change before it is fully in Metrics Graphics. Use at your own risk.",
+        data: [data[0], data[1], data[2]],
+        width: 600,
+        height: 200,
+        right: 40,
+        target: '#custom-colors',
+        legend: ['Team A','Team B','Team C'],
+        legend_target: 'div#custom-color-key',
+        colors: ['blue', 'rgb(255,100,43)', '#CCCCFF'],
+        aggregate_rollover: true
+    });
+})
 </script>