pdv-ui - npm Package Compare versions

Comparing version 1.0.9 to 1.0.10

lib/index.js

@@ -487,3 +487,3 @@ 'use strict';
     } = props;
-    let base = theme ? '255, 255, 255,' : '33, 33, 33,';
+    let baseColor = theme ? '255, 255, 255,' : '33, 33, 33,';
     let margin = {};
@@ -498,4 +498,2 @@
     }
-
-    const tickWidth = 4;
     const xMax = width - margin.left - margin.right;
@@ -517,16 +515,21 @@ const yMax = height - margin.top - margin.bottom;
     const wrapper = svg.append('g').attr('transform', `translate(${margin.left}, ${margin.top})`);
-    const bottomAxis = svg.append('g').attr('transform', `translate(${margin.left / 2}, ${margin.top})`);
-    bottomAxis.append('line').attr('y1', yMax).attr('x1', 0).attr('y2', yMax).attr('x2', width - margin.left / 2).attr('width', width).attr('stroke-width', '1').attr('stroke', `rgba(${base} .1)`);
-    bottomAxis.append('g').attr('transform', `translate(${margin.left / 2}, ${height - margin.bottom})`).selectAll('g').data(data).enter().append('g').attr('transform', (d, i) => {
-      return `translate(${xScale(getX(d))}, 0)`;
-    }).append('text').attr('id', (d, i) => 'bottom-axis-label-' + i).attr('dx', 2).style('text-transform', 'uppercase').attr('fill', `rgba(${base} .5)`).attr('font-size', 12).text(d => tickFormat(getX(d)));
-    const leftAxis = svg.append('g').attr('transform', `translate(0, ${margin.top})`);
-    leftAxis.append('line').attr('y1', 0).attr('x1', margin.left / 2).attr('y2', yMax).attr('x2', margin.left / 2).attr('width', width).attr('stroke-width', '1').attr('stroke', `rgba(${base} .1)`);
-    let tickValues = d3Array.ticks(min, max, numTicksForHeight$1(height));
-    leftAxis.selectAll('g').data(tickValues).enter().append('g').attr('class', 'tick');
-    leftAxis.selectAll('g.tick').append('line').attr('y1', (d, i) => yScale(d)).attr('x1', margin.left / 2 - tickWidth).attr('y2', (d, i) => yScale(d)).attr('x2', margin.left / 2).attr('stroke-width', '1').attr('stroke', (d, i) => {
-      return d !== 0 ? `rgba(${base} .2)` : 'transparent';
+    renderAxis({ ...props,
+      svg,
+      margin,
+      baseColor,
+      yScale,
+      xScale,
+      min,
+      max,
+      tickFormat
     });
-    leftAxis.selectAll('g.tick').append('text').attr('y', (d, i) => yScale(d)).attr('x', margin.left / 2 - (tickWidth + 5)).attr('dy', 5).attr('fill', `rgba(${base} .5)`).attr('text-anchor', 'end').attr('font-size', 12).text((d, i) => `${d}`);
-    wrapper.selectAll('line').data(tickValues).enter().append('line').attr('y1', (d, i) => yScale(d)).attr('x1', -margin.left / 2).attr('y2', (d, i) => yScale(d)).attr('x2', width - margin.left / 2).attr('stroke-width', '1').attr('stroke', `rgba(${base} .05)`);
+    renderBackground({ ...props,
+      wrapper,
+      min,
+      max,
+      yScale,
+      xScale,
+      baseColor,
+      xOffset: 0
+    });
     const path = wrapper.append('path').datum(data).attr('d', lineData).attr('id', 'line').attr('fill', 'transparent').attr('stroke', stroke).attr('stroke-width', strokeWidth);
@@ -584,8 +587,2 @@ svg.append('rect').attr('class', 'overlay').attr('width', width).attr('height', yMax).attr('fill', 'none').attr('pointer-events', 'all').on('mouseover', handleMouseOver).on('mouseout', handleMouseOut).on('mousemove', handleMouseMove);
 
-function numTicksForHeight$1(height) {
-  if (height <= 300) return 3;
-  if (300 < height && height <= 600) return 5;
-  return 10;
-}
-
 const chart$2 = new LineChart();
@@ -592,0 +589,0 @@

package.json

 {
   "name": "pdv-ui",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "Data Visualisation components",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/charts/bubble-chart/stories/index.js

@@ -66,4 +66,3 @@ import React from 'react'
         },
-        'wonder',
-        'ONE'
+        'wonder'
       )}
@@ -91,4 +90,3 @@ />
         },
-        'grid',
-        'ONE'
+        'grid'
       )}
@@ -95,0 +93,0 @@ />

src/charts/enhancers/stories/index.js

@@ -42,4 +42,3 @@ import React from 'react'
         },
-        null,
-        'ONE'
+        null
       )}
@@ -46,0 +45,0 @@ />

src/charts/line-chart/LineChart.js

@@ -8,2 +8,4 @@ import { select, mouse } from 'd3-selection'
 import applyTheme from '../utils/applyTheme'
+import renderAxis from '../utils/renderAxis'
+import renderBackground from '../utils/renderBackground'
 
@@ -39,3 +41,3 @@ const sides = ['top', 'right', 'bottom', 'left']
 
-    let base = theme ? '255, 255, 255,' : '33, 33, 33,'
+    let baseColor = theme ? '255, 255, 255,' : '33, 33, 33,'
 
@@ -90,94 +92,24 @@ let margin = {}
 
-    const bottomAxis = svg
-      .append('g')
-      .attr('transform', `translate(${margin.left / 2}, ${margin.top})`)
+    renderAxis({
+      ...props,
+      svg,
+      margin,
+      baseColor,
+      yScale,
+      xScale,
+      min,
+      max,
+      tickFormat,
+    })
+    renderBackground({
+      ...props,
+      wrapper,
+      min,
+      max,
+      yScale,
+      xScale,
+      baseColor,
+      xOffset: 0,
+    })
 
-    bottomAxis
-      .append('line')
-      .attr('y1', yMax)
-      .attr('x1', 0)
-      .attr('y2', yMax)
-      .attr('x2', width - margin.left / 2)
-      .attr('width', width)
-      .attr('stroke-width', '1')
-      .attr('stroke', `rgba(${base} .1)`)
-
-    bottomAxis
-      .append('g')
-      .attr(
-        'transform',
-        `translate(${margin.left / 2}, ${height - margin.bottom})`
-      )
-      .selectAll('g')
-      .data(data)
-      .enter()
-      .append('g')
-      .attr('transform', (d, i) => {
-        return `translate(${xScale(getX(d))}, 0)`
-      })
-      .append('text')
-      .attr('id', (d, i) => 'bottom-axis-label-' + i)
-      .attr('dx', 2)
-      .style('text-transform', 'uppercase')
-      .attr('fill', `rgba(${base} .5)`)
-      .attr('font-size', 12)
-      .text(d => tickFormat(getX(d)))
-
-    const leftAxis = svg
-      .append('g')
-      .attr('transform', `translate(0, ${margin.top})`)
-
-    leftAxis
-      .append('line')
-      .attr('y1', 0)
-      .attr('x1', margin.left / 2)
-      .attr('y2', yMax)
-      .attr('x2', margin.left / 2)
-      .attr('width', width)
-      .attr('stroke-width', '1')
-      .attr('stroke', `rgba(${base} .1)`)
-
-    let tickValues = ticks(min, max, numTicksForHeight(height))
-    leftAxis
-      .selectAll('g')
-      .data(tickValues)
-      .enter()
-      .append('g')
-      .attr('class', 'tick')
-
-    leftAxis
-      .selectAll('g.tick')
-      .append('line')
-      .attr('y1', (d, i) => yScale(d))
-      .attr('x1', margin.left / 2 - tickWidth)
-      .attr('y2', (d, i) => yScale(d))
-      .attr('x2', margin.left / 2)
-      .attr('stroke-width', '1')
-      .attr('stroke', (d, i) => {
-        return d !== 0 ? `rgba(${base} .2)` : 'transparent'
-      })
-
-    leftAxis
-      .selectAll('g.tick')
-      .append('text')
-      .attr('y', (d, i) => yScale(d))
-      .attr('x', margin.left / 2 - (tickWidth + 5))
-      .attr('dy', 5)
-      .attr('fill', `rgba(${base} .5)`)
-      .attr('text-anchor', 'end')
-      .attr('font-size', 12)
-      .text((d, i) => `${d}`)
-
-    wrapper
-      .selectAll('line')
-      .data(tickValues)
-      .enter()
-      .append('line')
-      .attr('y1', (d, i) => yScale(d))
-      .attr('x1', -margin.left / 2)
-      .attr('y2', (d, i) => yScale(d))
-      .attr('x2', width - margin.left / 2)
-      .attr('stroke-width', '1')
-      .attr('stroke', `rgba(${base} .05)`)
-
     const path = wrapper
@@ -184,0 +116,0 @@ .append('path')

src/charts/line-chart/stories/index.js

@@ -19,2 +19,4 @@ import React from 'react'
 
+const margin = { top: 50, right: 20, bottom: 90, left: 90 }
+
 const stories = storiesOf('Line Chart', module)
@@ -24,29 +26,62 @@
 
-stories.add('basic', () => (
-  <LineChart
-    width={700}
-    height={380}
-    margin={{ top: 20, right: 20, bottom: 40, left: 90 }}
-    data={data}
-    getX={getX}
-    getY={getY}
-    min={0}
-    max={100}
-    barWidth={15}
-    animateOnEnter={false}
-    tickFormat={d => format(d, 'D')}
-    theme={select(
-      'Theme',
-      {
-        None: null,
-        Dark: 'dark',
-        Wonder: 'wonder',
-        Confidence: 'confidence',
-        Excitement: 'excitement',
-        Tranquil: 'tranquil',
-      },
-      null,
-      'ONE'
-    )}
-  />
-))
+stories
+  .add('basic', () => (
+    <LineChart
+      width={700}
+      height={380}
+      margin={margin}
+      data={data}
+      getX={getX}
+      getY={getY}
+      min={0}
+      max={100}
+      tickFormat={val => format(val, 'Do MMM YY')}
+    />
+  ))
+  .add('theming', () => (
+    <LineChart
+      width={700}
+      height={380}
+      margin={margin}
+      data={data}
+      getX={getX}
+      getY={getY}
+      min={0}
+      max={100}
+      tickFormat={val => format(val, 'Do MMM YY')}
+      theme={select(
+        'Theme',
+        {
+          None: null,
+          Dark: 'dark',
+          Wonder: 'wonder',
+          Confidence: 'confidence',
+          Excitement: 'excitement',
+          Tranquil: 'tranquil',
+        },
+        'excitement'
+      )}
+    />
+  ))
+  .add('background grids', () => (
+    <LineChart
+      width={700}
+      height={380}
+      margin={margin}
+      data={data}
+      getX={getX}
+      getY={getY}
+      min={0}
+      max={100}
+      tickFormat={val => format(val, 'Do MMM YY')}
+      background={select(
+        'Background',
+        {
+          None: null,
+          Grid: 'grid',
+          Dots: 'dots',
+        },
+        'dots'
+      )}
+    />
+  ))

No alert changes

Worsened metrics

Total package byte prevSize

25224348

decreased by-0.01%

Lines of code

2793

decreased by-1.06%

No dependency changes