Nervously Practice Multithreading

    @nebula.js/sn-sankey-chart

    1.5.5 • Public • Published

    @nebula.js/sn-sankey-chart

    The Sankey chart is a flow chart which visually emphasizes major transfers or flows within defined system boundaries. The width of the chart arrows is shown proportionally to the flow quantity.

    • A minimum of two dimensions and one measure is required. You can use up to five dimensions, but only one measure.
    • The dimensions do not need to be of equal size on each side of the diagram.
    • You can use the dimension values to set the color of the flows in the chart.
    • Link colors can be based on source or target anchor.

    Requirements

    Requires @nebula.js/stardust version 1.2.0 or later.

    Installing

    If you use npm: npm install @nebula.js/sn-sankey-chart. You can also load through the script tag directly from https://unpkg.com.

    Usage

    import { embed } from '@nebula.js/stardust';
    import sankey from '@nebula.js/sn-sankey-chart';
    
    // 'app' is an enigma app model
    const nuked = embed(app, {
      types: [
        {
          // register sankey chart
          name: 'sankey',
          load: () => Promise.resolve(sankey),
        },
      ],
    });
    
    nuked.render({
      element,
      type: 'sankey',
      fields: ['Region', 'Product Group', 'Product Type', 'Product Line', '=Sum(Margin)'],
      // overrides default properties
      properties: {
        node: {
          padding: 0.2,
          width: 0.3,
        },
        link: {
          opacity: 0.5,
          shadow: false,
          color: 3,
          colorBy: 'custom',
        },
      },
    });

    More examples

    Node and link colors

    You can change the node colors of each dimension value. The color should be a valid CSS color.

    The colors of chart links are based on either the source or target anchors. To apply the source or target anchor color to chart links either use the string ='SOURCE' or ='TARGET'. You can also select a separate color by entering a color code string. The color should be a valid CSS color.

    nuked.render({
      element: document.querySelector('.object'),
      type: 'sankeyChart',
      properties: {
        node: {
          padding: 0.1,
          width: 0.7,
        },
        qHyperCubeDef: {
          qDimensions: [
            {
              qDef: {
                qFieldDefs: ['Region'],
              },
              qAttributeExpressions: [
                {
                  qExpression: "if(Sum(total<Region> Margin) > 4500000, '#53ac94', '#ac536b')",
                },
              ],
            },
            {
              qDef: {
                qFieldDefs: ['Product Group'],
              },
              qAttributeExpressions: [
                {
                  qExpression: "'#28bad7'",
                },
              ],
            },
          ],
          qMeasures: [
            {
              qDef: {
                qDef: 'Sum(Margin)',
              },
              qAttributeExpressions: [
                {
                  qExpression: "if(Sum(Margin) > 300000, '#53ac94', '#ac536b')",
                },
              ],
            },
          ],
          qInitialDataFetch: [
            {
              qLeft: 0,
              qTop: 0,
              qWidth: 6,
              qHeight: 1000,
            },
          ],
        },
      },
    });

    Links colored based on their source

    nuked.render({
      element: document.querySelector('.object'),
      type: 'sankeyChart',
      fields: ['Product Group', 'Product Type'],
      properties: {
        qHyperCubeDef: {
          qDimensions: [
            {
              qDef: {
                qFieldDefs: ['Region'],
              },
              qAttributeExpressions: [
                {
                  qExpression: "if(Sum(total<Region> Margin) > 4500000, '#53ac94', '#ac536b')",
                },
              ],
            },
          ],
          qMeasures: [
            {
              qDef: {
                qDef: 'Sum(Margin)',
              },
              qAttributeExpressions: [
                {
                  qExpression: "='SOURCE'",
                },
              ],
            },
          ],
          qInitialDataFetch: [
            {
              qLeft: 0,
              qTop: 0,
              qWidth: 6,
              qHeight: 1000,
            },
          ],
        },
      },
    });

    Sankey chart plugins

    A plugin can be passed into a Sankey chart to add or modify its capability or visual appearance. A plugin needs to be defined before it can be rendered together with the chart.

    // Step 1: define the plugin
    
    // Adding a text component
    const textPlugin = {
      info: {
        name: 'text-plugin',
        type: 'component-definition',
      },
      fn: ({ layout, keys }) => {
        const componentDefinition = {
          type: 'text',
          key: 'my-text',
          text: 'Sales of Clothes in Different Areas',
          layout: { dock: 'top' },
        };
        return componentDefinition;
      },
    };
    
    // Step 2: passing the plugin definition into the render function
    
    // Rendering a Sankey chart with plugins
    nuked.render({
      element: document.getElementById('object'),
      type: 'sn-sankey-chart',
      fields: ['CategoryName', 'Region', '=Sum(Sales)'],
      plugins: [textPlugin], // eslint-disable-line no-undef
    });

    The plugin definition is an object, with two properties info and fn. The fn returns a picasso.js component. To build this component, some important chart internals are passed into the argument object of fn.

    // Structure of the argument object of fn
    const pluginArgs = {
      layout,
      keys: {
        SCALE: { DIMENSIONS },
        COMPONENT: { LABELS_TITLES, LABELS },
      },
    };

    With plugins, you can either add new components or modify existing components of the Sankey chart.

    Add new components

    The new component can be a standard Picasso component or a custom Picasso component. Here we demo a standard label component which add a label at the top center of the chart.

    // Adding a text component
    const textPlugin = {
      info: {
        name: 'text-plugin',
        type: 'component-definition',
      },
      fn: ({ layout, keys }) => {
        const componentDefinition = {
          type: 'text',
          key: 'my-text',
          text: 'Sales of Clothes in Different Areas',
          layout: { dock: 'top' },
        };
        return componentDefinition;
      },
    };

    Modify existing components

    As an example, the appearance of the labels can be modified by plugins.

    To overide an existing component, fn should returns a picasso.js component that has the same key as the existing component (keys.COMPONENT.LABELS in this example)

    // Modifying the look of the labels
    const labelsPlugin = {
      info: {
        name: 'labels-plugin',
        type: 'component-definition',
      },
      fn: ({ keys, layout }) => {
        const componentDefinition = {
          type: 'labels',
    
          // Provide the same name as the exisiting component to override it
          key: keys.COMPONENT.LABELS,
          settings: {
            sources: [
              {
                component: 'san',
                selector: '.labelCenter',
                strategy: {
                  type: 'rows',
                  settings: {
                    align: 0.5,
                    justify: 0.5,
                    padding: 4,
                    labels: [{}, {}],
                  },
                },
              },
              {
                component: 'san',
                selector: '.labelLeft',
                strategy: {
                  type: 'rows',
                  settings: {
                    align: 0,
                    justify: 0.5,
                    padding: 4,
                    fontFamily: 'Helvetica',
                    fontSize: '14',
                    fill: 'darkgreen',
                  },
                },
              },
              {
                component: 'san',
                selector: '.labelRight',
                strategy: {
                  type: 'rows',
                  settings: {
                    align: 1,
                    justify: 0.5,
                    padding: 4,
                    fontFamily: 'Helvetica',
                    fontSize: '14',
                    fill: 'darkred',
                  },
                },
              },
            ],
          },
        };
        return componentDefinition;
      },
    };

    Plugins disclaimer

    • The plugins API is still experimental.
    • We can not guarantee our charts to be compatible with all different settings, especially when modifying existing components.

    Install

    npm i @nebula.js/sn-sankey-chart

    DownloadsWeekly Downloads

    1,075

    Version

    1.5.5

    License

    MIT

    Unpacked Size

    3.64 MB

    Total Files

    22

    Last publish

    Collaborators

    • niekvanstaveren
    • likang6688
    • ccm33
    • nilzona
    • qlikossbuild
    • veinfors
    • tobias-astrom-qlik
    • peol
    • axelsson.hakan
    • wennmo
    • chrismanley
    • masaruhoshi
    • elise.eborn
    • maxgefvert