All examples in parity now

cereallarceny · Jul 17, 2019 · 4df9aef · 4df9aef
1 parent e4cefbc
commit 4df9aef
Show file tree

Hide file tree

Showing 3 changed files with 211 additions and 35 deletions.
diff --git a/src/Sample.js b/src/Sample.js
@@ -1,7 +1,8 @@
 export default class Sample {
-  constructor(x, y, progress) {
+  constructor(x, y, progress, segment) {
     this.x = x;
     this.y = y;
     this.progress = progress;
+    this.segment = segment;
   }
 }
diff --git a/src/data.js b/src/data.js
@@ -163,9 +163,9 @@ const averageSegmentJoins = (outlinedData, precision) => {
 
 export const flattenSegments = data =>
   data
-    .map((segment, i) => {
-      return segment.samples.map(sample => {
-        return { ...sample, id: i };
-      });
-    })
+    .map((segment, i) =>
+      segment.samples.map(
+        sample => new Sample(sample.x, sample.y, sample.progress, i)
+      )
+    )
     .flat();
diff --git a/src/index.stories.js b/src/index.stories.js
@@ -108,9 +108,11 @@ const createDataKnobs = config => {
   return { data, segments, samples, precision };
 };
 
-const stories = storiesOf('Gradient Path', module);
+const stories = storiesOf('Gradient Path/Vanilla Javascript', module);
+const d3Stories = storiesOf('Gradient Path/D3', module);
 
 stories.addDecorator(withKnobs);
+d3Stories.addDecorator(withKnobs);
 
 stories.add('with path fill', () => {
   const width = number(
@@ -211,7 +213,7 @@ stories.add('with circles (fill & stroke)', () => {
     'Main'
   );
 
-  const strokeColor = text('Stroke color', '#eee', 'Main');
+  const strokeColor = text('Stroke color', '#444', 'Main');
 
   const strokeWidth = number(
     'Stroke width',
@@ -309,7 +311,7 @@ stories.add('with multiple elements', () => {
         type: 'circle',
         fill: circleFill,
         width: circleWidth,
-        stroke: '#333',
+        stroke: '#444',
         strokeWidth: 0.5
       });
     }
@@ -326,7 +328,9 @@ stories.add('with multiple elements', () => {
   return <RenderComponent />;
 });
 
-stories.add('using d3.js', () => {
+// ----------------------------------------------------------
+
+d3Stories.add('with path fill', () => {
   const width = number(
     'Width',
     10,
@@ -339,7 +343,52 @@ stories.add('using d3.js', () => {
     'Main'
   );
 
-  const element = select('Element', ['path', 'circle'], 'path', 'Main');
+  const { data, segments, samples, precision } = createDataKnobs();
+
+  class RenderComponent extends React.Component {
+    componentDidMount() {
+      const colors = d3.interpolateRainbow;
+      const path = d3.select('path').remove();
+      const data = getData(path.node(), segments, samples, precision);
+
+      const lineFunc = d3
+        .line()
+        .x(d => d.x)
+        .y(d => d.y);
+
+      d3.select('svg')
+        .selectAll('path')
+        .data(strokeToFill(data, width, precision))
+        .enter()
+        .append('path')
+        .attr('fill', d => colors(d.progress))
+        .attr('d', d => lineFunc(d.samples));
+    }
+
+    render() {
+      return (
+        <svg id="gradient-path" width="300" height="200" viewBox="0 0 100 100">
+          <path fill="none" d={data}></path>
+        </svg>
+      );
+    }
+  }
+
+  return <RenderComponent />;
+});
+
+d3Stories.add('with path stroke', () => {
+  const width = number(
+    'Width',
+    10,
+    {
+      range: true,
+      min: 1,
+      max: 50,
+      step: 1
+    },
+    'Main'
+  );
 
   const { data, segments, samples, precision } = createDataKnobs();
 
@@ -349,30 +398,156 @@ stories.add('using d3.js', () => {
       const path = d3.select('path').remove();
       const data = getData(path.node(), segments, samples, precision);
 
-      if (element === 'path') {
-        const lineFunc = d3
-          .line()
-          .x(d => d.x)
-          .y(d => d.y);
-
-        d3.select('svg')
-          .selectAll('path')
-          .data(strokeToFill(data, width, precision))
-          .enter()
-          .append('path')
-          .attr('fill', d => colors(d.progress))
-          .attr('d', d => lineFunc(d.samples));
-      } else if (element === 'circle') {
-        d3.select('svg')
-          .selectAll('circle')
-          .data(flattenSegments(data))
-          .enter()
-          .append('circle')
-          .attr('cx', d => d.x)
-          .attr('cy', d => d.y)
-          .style('fill', d => colors(d.progress))
-          .attr('r', width / 2);
-      }
+      const lineFunc = d3
+        .line()
+        .x(d => d.x)
+        .y(d => d.y);
+
+      d3.select('svg')
+        .selectAll('path')
+        .data(data)
+        .enter()
+        .append('path')
+        .attr('stroke', d => colors(d.progress))
+        .attr('stroke-width', width)
+        .attr('d', d => lineFunc(d.samples));
+    }
+
+    render() {
+      return (
+        <svg id="gradient-path" width="300" height="200" viewBox="0 0 100 100">
+          <path fill="none" d={data}></path>
+        </svg>
+      );
+    }
+  }
+
+  return <RenderComponent />;
+});
+
+d3Stories.add('with circles (fill & stroke)', () => {
+  const width = number(
+    'Width',
+    5,
+    {
+      range: true,
+      min: 1,
+      max: 50,
+      step: 1
+    },
+    'Main'
+  );
+
+  const strokeColor = text('Stroke color', '#444', 'Main');
+
+  const strokeWidth = number(
+    'Stroke width',
+    1,
+    {
+      range: true,
+      min: 0,
+      max: 10,
+      step: 1
+    },
+    'Main'
+  );
+
+  const { data, segments, samples, precision } = createDataKnobs({
+    segments: 10
+  });
+
+  class RenderComponent extends React.Component {
+    componentDidMount() {
+      const colors = d3.interpolateRainbow;
+      const path = d3.select('path').remove();
+      const data = getData(path.node(), segments, samples, precision);
+
+      d3.select('svg')
+        .selectAll('circle')
+        .data(flattenSegments(data))
+        .enter()
+        .append('circle')
+        .attr('cx', d => d.x)
+        .attr('cy', d => d.y)
+        .attr('r', width / 2)
+        .attr('fill', d => colors(d.progress))
+        .attr('stroke', strokeColor)
+        .attr('stroke-width', strokeWidth);
+    }
+
+    render() {
+      return (
+        <svg id="gradient-path" width="300" height="200" viewBox="0 0 100 100">
+          <path fill="none" d={data}></path>
+        </svg>
+      );
+    }
+  }
+
+  return <RenderComponent />;
+});
+
+d3Stories.add('with multiple elements', () => {
+  const width = number(
+    'Width',
+    10,
+    {
+      range: true,
+      min: 1,
+      max: 50,
+      step: 1
+    },
+    'Main'
+  );
+
+  const circleFill = text('Circle fill', '#eee', 'Main');
+
+  const circleWidth = number(
+    'Circle width',
+    3,
+    {
+      range: true,
+      min: 0,
+      max: 10,
+      step: 1
+    },
+    'Main'
+  );
+
+  const { data, segments, samples, precision } = createDataKnobs({
+    segments: 10
+  });
+
+  class RenderComponent extends React.Component {
+    componentDidMount() {
+      const colors = d3.interpolateRainbow;
+      const path = d3.select('path').remove();
+      const data = getData(path.node(), segments, samples, precision);
+
+      const lineFunc = d3
+        .line()
+        .x(d => d.x)
+        .y(d => d.y);
+
+      d3.select('svg')
+        .selectAll('path')
+        .data(strokeToFill(data, width, precision))
+        .enter()
+        .append('path')
+        .attr('fill', d => colors(d.progress))
+        .attr('d', d => lineFunc(d.samples));
+
+      d3.select('svg')
+        .selectAll('circle')
+        .data(flattenSegments(data))
+        .enter()
+        .append('circle')
+        .attr('cx', d => d.x)
+        .attr('cy', d => d.y)
+        .attr('r', circleWidth / 2)
+        .attr('fill', circleFill)
+        .attr('stroke', '#444')
+        .attr('stroke-width', 0.5);
     }
 
     render() {