Skip to content

Rough.js, dynamic line interpolators

Choose a tag to compare

@emeeks emeeks released this 17 Apr 01:53
· 2241 commits to main since this release

Features

  • Under the hood, roughjs is now used to render sketchy elements. To support this, any renderMode props will also take an object (or function returning an object) that can have the structure of {renderMode: "sketchy", roughness: 1.5, ...otherRoughJSOptions } to allow you to key different sketchy rendering settings based on data properties.
  • Because of roughjs support for canvas, all elements that could be rendered in canvas (everything but summary elements in OrdinalFrame) will also be rendered sketchy in canvas now.

screen shot 2018-04-16 at 6 21 19 pm

  • lineType in XYFrame now lets you pass an object to interpolator that can have a property dynamicInterpolator that can take a function and will be passed each line data so you can interpolate lines with different interpolators in the same frame:
           lineType={{
              type: "line",
              interpolator: {
                dynamicInterpolator: (d, i) =>
                  i === 0 ? curveStep : curveBasis
              }
            }}

screen shot 2018-04-16 at 1 57 39 pm

FIXES

  • Bars in OrdinalFrame now have a minimum width of 1px even when padding or dynamicColumnWidth would push them into the negative.