@redsift/d3-rs-lines - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

package.json

 {
   "name": "@redsift/d3-rs-lines",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Generates line charts using D3v4.",
@@ -44,4 +44,4 @@ "keywords": [
     "@redsift/d3-rs-legends": "~0.1.0",    
-    "@redsift/d3-rs-theme": "~0.3.0",
-    "@redsift/d3-rs-tip": "~0.2.3",     
+    "@redsift/d3-rs-theme": "~0.4.1",
+    "@redsift/d3-rs-tip": "~0.3.0",     
     "@redsift/d3-rs-intl": "~0.0.2"
@@ -61,3 +61,3 @@ },
     "rollup-plugin-node-resolve": "^1.5.0",  
-    "rollup-plugin-commonjs": "^3.2.0",     
+    "rollup-plugin-commonjs": "^3.3.0",     
     "rollup-plugin-buble": "^0.12.1",
@@ -64,0 +64,0 @@ "rollup-plugin-json": "^2.0.0",

README.md

@@ -74,2 +74,3 @@ # d3-rs-lines
 `tipHtml`|*String, Function* parameters of the function are `(d, i, s)` where `d` is the data element, `i` is the index, `s` is the series of the data
+`onClick`|*Function* handler for a click event on the data series
 
@@ -76,0 +77,0 @@ ### Time

src/lines.js

@@ -82,3 +82,3 @@
 import { units, time } from '@redsift/d3-rs-intl';
-import { tip } from '@redsift/d3-rs-tip';
+import { body as tip } from '@redsift/d3-rs-tip';
 import { 
@@ -260,43 +260,2 @@ presentation10,
 
-
-// const DEFAULT_FILL_OPACITY = 0.33;
-
-/*
-[ "@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300,500); @import 'https://fonts.googleapis.com/css?family=Raleway:400,500';",
-                        ".axis text, g.highlight text { font-family: 'Source Code Pro', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-weight: 300; fill: " + display.text.black + "; }",
-                        ".voronoi text{ font-size: 14px; font-family: 'Raleway', sans-serif; font-weight: 500 }",
-                        ".chart-legends text, g.highlight text.supplied { font-size: 14px; font-family: 'Raleway', sans-serif; font-weight: 300; fill: " + display.text.black + "; }",
-                        ".axis path, .axis line { fill: none; stroke: " + display.lines.seperator + "; shape-rendering: crispEdges; }",
-                        "g.axis-v path { stroke: none }",
-                        "g.highlight text { font-size: 14px; }",
-            
-                        "g.axis-i path, g.axis-i g.tick line, g.axis-i-minor g.tick line { stroke-width: 1.0px; stroke: " + display.text.black + " }",
-
-                        "line { stroke-width: 1.5px }",
-                        "line.grid, g.axis-i g.tick line.grid { stroke-width: 2.0px; stroke-dasharray: 2,2; stroke: " + display.lines.seperator + " }",
-                        ".legend text { font-size: 12px }",
-                        "path.stroke { stroke-width: 2.5px }",
-                        ".voronoi path { stroke: none }"
-                      ].join(' \n');
-
-
-                        "path.series-0 { stroke: red }",
-                        "path.series-1 { stroke: green }",
-                        "path.series-2 { stroke: orange }",
-                        "path.series-3 { stroke: grey }" 
-                        */
-/*
-function template(strings, ...keys) {
-  return (function(...values) {
-    var dict = values[values.length - 1] || {};
-    var result = [strings[0]];
-    keys.forEach(function(key, i) {
-      var value = Number.isInteger(key) ? values[key] : dict[key];
-      result.push(value, strings[i + 1]);
-    });
-    return result.join('');
-  });
-}
-*/
-
 export default function lines(id) {
@@ -334,2 +293,3 @@ let classed = 'chart-lines',
       stacked = null,
+      onClick = null,
       stackOrder = stackOrderNone, 
@@ -972,14 +932,55 @@ stackOffset = stackOffsetNone,
       if (_style === undefined) {
-        _style = _impl.defaultStyle();
+        _style = _impl.defaultStyle(theme, width);
         
         if (lchart != null) {
-          _style += lchart.defaultStyle();
+          _style += lchart.defaultStyle(theme, width);
         }
+
+        _style += rtip.defaultStyle(theme);
+        rtip.style(null);
       }
-      let st = _style + ' ' + rtip.style();
-      // TODO: This has to be fixed in tip
-      rtip.style(st);
+
       rtip.html(_tipHtml);
       elmS.call(rtip);
 
+
+      let defsEl = snode.select('defs');
+      if (defsEl.empty()) {
+        defsEl = snode.append('defs');
+      }
+      
+      let styleEl = defsEl.selectAll('style' + (id ?  '#style-lines-' + id : '.style-' + classed)).data(_style ? [ _style ] : []);
+      styleEl.exit().remove();
+      styleEl = styleEl.enter()
+                  .append('style')
+                    .attr('type', 'text/css')
+                    .attr('id', (id ?  'style-lines-' + id : null))
+                    .attr('class', (id ?  null : 'style-' + classed))
+                  .merge(styleEl);
+      styleEl.text(s => s);
+
+      vmesh.on('click', function (d) {
+        let s = d.data[2];
+        let i = d.data[3];
+        
+        let item = data[s][i];
+        
+        if (stacked === true) {
+          // Quick hack to ignore empty series by scanning downward
+          while (item == null || (item[1][1] - item[1][0] === 0)) {
+            s = s - 1;
+            if (s < 0) break;
+            item = data[s][i];
+          }
+        }
+        
+        let nested = item[1].data;
+        
+        if (nested !== undefined) {
+          item = nested;
+        }
+        
+        if (onClick) onClick(item);
+      });
+
       vmesh.on('mouseover', function (d) {
@@ -1161,3 +1162,3 @@ let s = d.data[2];
 
-  _impl.defaultStyle = () => `
+  _impl.defaultStyle = (_theme, _width) => `
                   ${fonts.fixed.cssImport}
@@ -1174,3 +1175,3 @@ ${fonts.variable.cssImport}
                   ${_impl.self()} g.axis-v path { 
-                                              stroke: ${axisDisplayValue === true ? display[theme].axis : 'none'}; 
+                                              stroke: ${axisDisplayValue === true ? display[_theme].axis : 'none'}; 
                                             }
@@ -1180,3 +1181,3 @@
                   ${_impl.self()} g.axis-i path { 
-                                              stroke: ${axisDisplayIndex === true ? display[theme].axis : 'none'}; 
+                                              stroke: ${axisDisplayIndex === true ? display[_theme].axis : 'none'}; 
                                             }
@@ -1186,3 +1187,3 @@
                   ${_impl.self()} g.axis-i-minor line { 
-                                              stroke: ${display[theme].axis}; 
+                                              stroke: ${display[_theme].axis}; 
                                             }
@@ -1192,3 +1193,3 @@
                                         font-family: ${fonts.variable.family};
-                                        font-size: ${fonts.variable.sizeForWidth(width)};                
+                                        font-size: ${fonts.variable.sizeForWidth(_width)};                
                                       }
@@ -1202,3 +1203,3 @@
                                              stroke-dasharray: ${dashes.grid};
-                                             stroke: ${display[theme].grid};
+                                             stroke: ${display[_theme].grid};
                                             }
@@ -1214,5 +1215,5 @@
                                     font-family: ${fonts.fixed.family};
-                                    font-size: ${fonts.fixed.sizeForWidth(width)};                
+                                    font-size: ${fonts.fixed.sizeForWidth(_width)};                
                                     font-weight: ${fonts.fixed.weightMonochrome};  
-                                    fill: ${display[theme].text}
+                                    fill: ${display[_theme].text}
                                   }
@@ -1441,4 +1442,8 @@ `;
   
+  _impl.onClick = function(value) {
+    return arguments.length ? (onClick = value, _impl) : onClick;
+  };   
+  
                 
   return _impl;
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1476355

increased by14.24%

Lines of code

11498

increased by11.72%

Number of lines in readme file

82

increased by1.23%

Dependency changes

• + Added@redsift/d3-rs-theme@0.4.2(transitive)

• + Added@redsift/d3-rs-tip@0.3.3(transitive)

• + Addedd3-dispatch@1.0.6(transitive)

• + Addedd3-ease@1.0.7(transitive)

• + Addedd3-timer@1.0.10(transitive)

• + Addedd3-transition@1.0.4(transitive)

• - Removed@redsift/d3-rs-tip@0.2.3(transitive)

• - Removedd3-selection@0.8.0(transitive)

• Updated@redsift/d3-rs-theme@~0.4.1

• Updated@redsift/d3-rs-tip@~0.3.0