KaneAI - World’s First E2E Software Testing Agent.Signup for Private Beta Join TestMu Conference

How to use stacks method in storybook-root

Best JavaScript code snippet using storybook-root

Stacking.js

Source:Stacking.js

1/**2 * (c) 2010-2017 Torstein Honsi3 *4 * License: www.highcharts.com/license5 */6'use strict';7import H from './Globals.js';8import './Utilities.js';9import './Axis.js';10import './Chart.js';11import './Series.js';12var Axis = H.Axis,13    Chart = H.Chart,14    correctFloat = H.correctFloat,15    defined = H.defined,16    destroyObjectProperties = H.destroyObjectProperties,17    each = H.each,18    format = H.format,19    objectEach = H.objectEach,20    pick = H.pick,21    Series = H.Series;22/**23 * The class for stacks. Each stack, on a specific X value and either negative24 * or positive, has its own stack item.25 *26 * @class27 */28H.StackItem = function (axis, options, isNegative, x, stackOption) {29    var inverted = axis.chart.inverted;30    this.axis = axis;31    // Tells if the stack is negative32    this.isNegative = isNegative;33    // Save the options to be able to style the label34    this.options = options;35    // Save the x value to be able to position the label later36    this.x = x;37    // Initialize total value38    this.total = null;39    // This will keep each points' extremes stored by series.index and point40    // index41    this.points = {};42    // Save the stack option on the series configuration object, and whether to43    // treat it as percent44    this.stack = stackOption;45    this.leftCliff = 0;46    this.rightCliff = 0;47    // The align options and text align varies on whether the stack is negative48    // and if the chart is inverted or not.49    // First test the user supplied value, then use the dynamic.50    this.alignOptions = {51        align: options.align ||52            (inverted ? (isNegative ? 'left' : 'right') : 'center'),53        verticalAlign: options.verticalAlign ||54            (inverted ? 'middle' : (isNegative ? 'bottom' : 'top')),55        y: pick(options.y, inverted ? 4 : (isNegative ? 14 : -6)),56        x: pick(options.x, inverted ? (isNegative ? -6 : 6) : 0)57    };58    this.textAlign = options.textAlign ||59        (inverted ? (isNegative ? 'right' : 'left') : 'center');60};61H.StackItem.prototype = {62    destroy: function () {63        destroyObjectProperties(this, this.axis);64    },65    /**66     * Renders the stack total label and adds it to the stack label group.67     */68    render: function (group) {69        var chart = this.axis.chart,70            options = this.options,71            formatOption = options.format,72            str = formatOption ?73                format(formatOption, this, chart.time) :74                options.formatter.call(this);  // format the text in the label75        // Change the text to reflect the new total and set visibility to hidden76        // in case the serie is hidden77        if (this.label) {78            this.label.attr({ text: str, visibility: 'hidden' });79        // Create new label80        } else {81            this.label =82                chart.renderer.text(str, null, null, options.useHTML)83                    .css(options.style)84                    .attr({85                        align: this.textAlign,86                        rotation: options.rotation,87                        visibility: 'hidden' // hidden until setOffset is called88                    })89                    .add(group); // add to the labels-group90        }91        // Rank it higher than data labels (#8742)92        this.label.labelrank = chart.plotHeight;93    },94    /**95     * Sets the offset that the stack has from the x value and repositions the96     * label.97     */98    setOffset: function (xOffset, xWidth) {99        var stackItem = this,100            axis = stackItem.axis,101            chart = axis.chart,102            // stack value translated mapped to chart coordinates103            y = axis.translate(104                axis.usePercentage ? 100 : stackItem.total,105                0,106                0,107                0,108                1109            ),110            yZero = axis.translate(0), // stack origin111            h = defined(y) && Math.abs(y - yZero), // stack height112            x = chart.xAxis[0].translate(stackItem.x) + xOffset, // x position113            stackBox = defined(y) && stackItem.getStackBox(114                chart,115                stackItem,116                x,117                y,118                xWidth,119                h,120                axis121            ),122            label = stackItem.label,123            alignAttr;124        if (label && stackBox) {125            // Align the label to the box126            label.align(stackItem.alignOptions, null, stackBox);127            // Set visibility (#678)128            alignAttr = label.alignAttr;129            label[130                stackItem.options.crop === false || chart.isInsidePlot(131                    alignAttr.x,132                    alignAttr.y133                ) ? 'show' : 'hide'](true);134        }135    },136    getStackBox: function (chart, stackItem, x, y, xWidth, h, axis) {137        var reversed = stackItem.axis.reversed,138            inverted = chart.inverted,139            axisPos = axis.height + axis.pos - (inverted ? chart.plotLeft :140                chart.plotTop),141            neg = (stackItem.isNegative && !reversed) ||142                (!stackItem.isNegative && reversed); // #4056143        return { // this is the box for the complete stack144            x: inverted ? (neg ? y : y - h) : x,145            y: inverted ?146                    axisPos - x - xWidth :147                    (neg ?148                        (axisPos - y - h) :149                        axisPos - y150                    ),151            width: inverted ? h : xWidth,152            height: inverted ? xWidth : h153        };154    }155};156/**157 * Generate stacks for each series and calculate stacks total values158 */159Chart.prototype.getStacks = function () {160    var chart = this;161    // reset stacks for each yAxis162    each(chart.yAxis, function (axis) {163        if (axis.stacks && axis.hasVisibleSeries) {164            axis.oldStacks = axis.stacks;165        }166    });167    each(chart.series, function (series) {168        if (series.options.stacking && (series.visible === true ||169                chart.options.chart.ignoreHiddenSeries === false)) {170            series.stackKey = series.type + pick(series.options.stack, '');171        }172    });173};174// Stacking methods defined on the Axis prototype175/**176 * Build the stacks from top down177 *178 * @ignore179 */180Axis.prototype.buildStacks = function () {181    var axisSeries = this.series,182        reversedStacks = pick(this.options.reversedStacks, true),183        len = axisSeries.length,184        i;185    if (!this.isXAxis) {186        this.usePercentage = false;187        i = len;188        while (i--) {189            axisSeries[reversedStacks ? i : len - i - 1].setStackedPoints();190        }191        // Loop up again to compute percent and stream stack192        for (i = 0; i < len; i++) {193            axisSeries[i].modifyStacks();194        }195    }196};197Axis.prototype.renderStackTotals = function () {198    var axis = this,199        chart = axis.chart,200        renderer = chart.renderer,201        stacks = axis.stacks,202        stackTotalGroup = axis.stackTotalGroup;203    // Create a separate group for the stack total labels204    if (!stackTotalGroup) {205        axis.stackTotalGroup = stackTotalGroup =206            renderer.g('stack-labels')207                .attr({208                    visibility: 'visible',209                    zIndex: 6210                })211                .add();212    }213    // plotLeft/Top will change when y axis gets wider so we need to translate214    // the stackTotalGroup at every render call. See bug #506 and #516215    stackTotalGroup.translate(chart.plotLeft, chart.plotTop);216    // Render each stack total217    objectEach(stacks, function (type) {218        objectEach(type, function (stack) {219            stack.render(stackTotalGroup);220        });221    });222};223/**224 * Set all the stacks to initial states and destroy unused ones.225 *226 * @ignore227 */228Axis.prototype.resetStacks = function () {229    var axis = this,230        stacks = axis.stacks;231    if (!axis.isXAxis) {232        objectEach(stacks, function (type) {233            objectEach(type, function (stack, key) {234                // Clean up memory after point deletion (#1044, #4320)235                if (stack.touched < axis.stacksTouched) {236                    stack.destroy();237                    delete type[key];238                // Reset stacks239                } else {240                    stack.total = null;241                    stack.cumulative = null;242                }243            });244        });245    }246};247Axis.prototype.cleanStacks = function () {248    var stacks;249    if (!this.isXAxis) {250        if (this.oldStacks) {251            stacks = this.stacks = this.oldStacks;252        }253        // reset stacks254        objectEach(stacks, function (type) {255            objectEach(type, function (stack) {256                stack.cumulative = stack.total;257            });258        });259    }260};261// Stacking methods defnied for Series prototype262/**263 * Adds series' points value to corresponding stack264 */265Series.prototype.setStackedPoints = function () {266    if (!this.options.stacking || (this.visible !== true &&267            this.chart.options.chart.ignoreHiddenSeries !== false)) {268        return;269    }270    var series = this,271        xData = series.processedXData,272        yData = series.processedYData,273        stackedYData = [],274        yDataLength = yData.length,275        seriesOptions = series.options,276        threshold = seriesOptions.threshold,277        stackThreshold = pick(seriesOptions.startFromThreshold && threshold, 0),278        stackOption = seriesOptions.stack,279        stacking = seriesOptions.stacking,280        stackKey = series.stackKey,281        negKey = '-' + stackKey,282        negStacks = series.negStacks,283        yAxis = series.yAxis,284        stacks = yAxis.stacks,285        oldStacks = yAxis.oldStacks,286        stackIndicator,287        isNegative,288        stack,289        other,290        key,291        pointKey,292        i,293        x,294        y;295    yAxis.stacksTouched += 1;296    // loop over the non-null y values and read them into a local array297    for (i = 0; i < yDataLength; i++) {298        x = xData[i];299        y = yData[i];300        stackIndicator = series.getStackIndicator(301            stackIndicator,302            x,303            series.index304        );305        pointKey = stackIndicator.key;306        // Read stacked values into a stack based on the x value,307        // the sign of y and the stack key. Stacking is also handled for null308        // values (#739)309        isNegative = negStacks && y < (stackThreshold ? 0 : threshold);310        key = isNegative ? negKey : stackKey;311        // Create empty object for this stack if it doesn't exist yet312        if (!stacks[key]) {313            stacks[key] = {};314        }315        // Initialize StackItem for this x316        if (!stacks[key][x]) {317            if (oldStacks[key] && oldStacks[key][x]) {318                stacks[key][x] = oldStacks[key][x];319                stacks[key][x].total = null;320            } else {321                stacks[key][x] = new H.StackItem(322                    yAxis,323                    yAxis.options.stackLabels,324                    isNegative,325                    x,326                    stackOption327                );328            }329        }330        // If the StackItem doesn't exist, create it first331        stack = stacks[key][x];332        if (y !== null) {333            stack.points[pointKey] = stack.points[series.index] =334                [pick(stack.cumulative, stackThreshold)];335            // Record the base of the stack336            if (!defined(stack.cumulative)) {337                stack.base = pointKey;338            }339            stack.touched = yAxis.stacksTouched;340            // In area charts, if there are multiple points on the same X value,341            // let the area fill the full span of those points342            if (stackIndicator.index > 0 && series.singleStacks === false) {343                stack.points[pointKey][0] =344                    stack.points[series.index + ',' + x + ',0'][0];345            }346        // When updating to null, reset the point stack (#7493)347        } else {348            stack.points[pointKey] = stack.points[series.index] = null;349        }350        // Add value to the stack total351        if (stacking === 'percent') {352            // Percent stacked column, totals are the same for the positive and353            // negative stacks354            other = isNegative ? stackKey : negKey;355            if (negStacks && stacks[other] && stacks[other][x]) {356                other = stacks[other][x];357                stack.total = other.total =358                    Math.max(other.total, stack.total) + Math.abs(y) || 0;359            // Percent stacked areas360            } else {361                stack.total = correctFloat(stack.total + (Math.abs(y) || 0));362            }363        } else {364            stack.total = correctFloat(stack.total + (y || 0));365        }366        stack.cumulative = pick(stack.cumulative, stackThreshold) + (y || 0);367        if (y !== null) {368            stack.points[pointKey].push(stack.cumulative);369            stackedYData[i] = stack.cumulative;370        }371    }372    if (stacking === 'percent') {373        yAxis.usePercentage = true;374    }375    this.stackedYData = stackedYData; // To be used in getExtremes376    // Reset old stacks377    yAxis.oldStacks = {};378};379/**380 * Iterate over all stacks and compute the absolute values to percent381 */382Series.prototype.modifyStacks = function () {383    var series = this,384        stackKey = series.stackKey,385        stacks = series.yAxis.stacks,386        processedXData = series.processedXData,387        stackIndicator,388        stacking = series.options.stacking;389    if (series[stacking + 'Stacker']) { // Modifier function exists390        each([stackKey, '-' + stackKey], function (key) {391            var i = processedXData.length,392                x,393                stack,394                pointExtremes;395            while (i--) {396                x = processedXData[i];397                stackIndicator = series.getStackIndicator(398                    stackIndicator,399                    x,400                    series.index,401                    key402                );403                stack = stacks[key] && stacks[key][x];404                pointExtremes = stack && stack.points[stackIndicator.key];405                if (pointExtremes) {406                    series[stacking + 'Stacker'](pointExtremes, stack, i);407                }408            }409        });410    }411};412/**413 * Modifier function for percent stacks. Blows up the stack to 100%.414 */415Series.prototype.percentStacker = function (pointExtremes, stack, i) {416    var totalFactor = stack.total ? 100 / stack.total : 0;417    // Y bottom value418    pointExtremes[0] = correctFloat(pointExtremes[0] * totalFactor);419    // Y value420    pointExtremes[1] = correctFloat(pointExtremes[1] * totalFactor);421    this.stackedYData[i] = pointExtremes[1];422};423/**424* Get stack indicator, according to it's x-value, to determine points with the425* same x-value426*/427Series.prototype.getStackIndicator = function (stackIndicator, x, index, key) {428    // Update stack indicator, when:429    // first point in a stack || x changed || stack type (negative vs positive)430    // changed:431    if (!defined(stackIndicator) || stackIndicator.x !== x ||432            (key && stackIndicator.key !== key)) {433        stackIndicator = {434            x: x,435            index: 0,436            key: key437        };438    } else {439        stackIndicator.index++;440    }441    stackIndicator.key = [index, x, stackIndicator.index].join(',');442    return stackIndicator;...

Using AI Code Generation

1import { storiesOf } from '@storybook/react';2import { withKnobs, text } from '@storybook/addon-knobs';3import { withInfo } from '@storybook/addon-info';4import { withTests } from '@storybook/addon-jest';5import { withA11y } from '@storybook/addon-a11y';6import { withOptions } from '@storybook/addon-options';7import { withViewport } from '@storybook/addon-viewport';8import { withBackgrounds } from '@storybook/addon-backgrounds';9import { withConsole } from '@storybook/addon-console';10import { withLinks } from '@storybook/addon-links';11import { withNotes } from '@storybook/addon-notes';12import { withReadme } from 'storybook-readme';13import { withSmartKnobs } from 'storybook-addon-smart-knobs';14import { withStorysource } from '@storybook/addon-storysource';15import { withTests } from '@storybook/addon-jest';16import { configureViewport } from '@storybook/addon-viewport';17storiesOf('Addons', module)18  .addDecorator(withKnobs)19  .addDecorator(withInfo)20  .addDecorator(withTests)21  .addDecorator(withA11y)22  .addDecorator(withOptions)23  .addDecorator(withViewport)24  .addDecorator(withBackgrounds)25  .addDecorator(withConsole)26  .addDecorator(withLinks)27  .addDecorator(withNotes)28  .addDecorator(withReadme)29  .addDecorator(withSmartKnobs)30  .addDecorator(withStorysource)31  .addDecorator(withTests);32configureViewport({33});34addDecorator(withBackgrounds([35  { name: 'twitter', value: '#00aced', default: true },36  { name: 'facebook', value: '#3b5998' },37]));38addDecorator(39  withOptions({

Using AI Code Generation

1import { storiesOf } from '@storybook/react';2import { withInfo } from '@storybook/addon-info';3import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';4import { withReadme } from 'storybook-readme';5import { withA11y } from '@storybook/addon-a11y';6import Component from './Component';7import README from './README.md';8storiesOf('Component', module)9  .addDecorator(withKnobs)10  .addDecorator(withReadme(README))11  .addDecorator(withInfo)12  .addDecorator(withA11y)13  .add('default', () => (14      text={text('text', 'Hello Storybook')}15      isTrue={boolean('isTrue', true)}16      number={number('number', 1)}17  ));18import React from 'react';19import PropTypes from 'prop-types';20const Component = ({ text, isTrue, number }) => (21    {text}22    {isTrue}23    {number}24);25Component.propTypes = {26};27export default Component;28{29  "dependencies": {30  },31  "devDependencies": {32  },

Using AI Code Generation

1import { configure } from '@storybook/react';2import { setOptions } from '@storybook/addon-options';3import { addDecorator } from '@storybook/react';4import { withInfo } from '@storybook/addon-info';5configure(require.context('../src', true, /\.stories\.js$/), module);6addDecorator(withInfo);7setOptions({

Using AI Code Generation

1import { storiesOf } from '@storybook/react';2import { withKnobs, boolean, text, number } from '@storybook/addon-knobs';3import { action } from '@storybook/addon-actions';4import { withInfo } from '@storybook/addon-info';5storiesOf('Test', module)6  .addDecorator(withKnobs)7  .addDecorator(withInfo)8  .add('Test', () => {9    const test = text('Test', 'Test');10    return (11        <h1>{test}</h1>12    );13  });14storiesOf('Test', module)15  .addDecorator(withKnobs)16  .addDecorator(withInfo)17  .add('Test', () => {18    const test = text('Test', 'Test');19    return (20        <h1>{test}</h1>21    );22  });23storiesOf('Test', module)24  .addDecorator(withKnobs)25  .addDecorator(withInfo)26  .add('Test', () => {27    const test = text('Test', 'Test');28    return (29        <h1>{test}</h1>30    );31  });

Using AI Code Generation

1import { storiesOf } from '@storybook/react';2import { withStacks } from 'storybook-addon-stacks';3import { withKnobs } from '@storybook/addon-knobs';4storiesOf('Stacks', module)5  .addDecorator(withStacks)6  .addDecorator(withKnobs)7  .add('with knobs', () => {8    return <div>with knobs</div>;9  });10const path = require('path');11module.exports = (baseConfig, env, defaultConfig) => {12  defaultConfig.module.rules.push({13    test: /\.(ts|tsx)$/,14    include: path.resolve(__dirname, '../'),15      {16        loader: require.resolve('awesome-typescript-loader'),17        options: {18        },19      },20      {21        loader: require.resolve('react-docgen-typescript-loader'),22      },23  });24  defaultConfig.resolve.extensions.push('.ts', '.tsx');25  return defaultConfig;26};27import 'storybook-addon-stacks/register';28import { configure } from '@storybook/react';29import { setOptions } from '@storybook/addon-options';30setOptions({

Using AI Code Generation

1import { storiesOf } from "@storybook/react";2import { withStacks } from "storybook-addon-stacks";3storiesOf("Test", module)4  .addDecorator(withStacks)5  .add("Test", () => <div>Test</div>);6const { storiesOf } = require("@storybook/react");7const { withStacks } = require("storybook-addon-stacks");8storiesOf("Test", module)9  .addDecorator(withStacks)10  .add("Test", () => <div>Test</div>);11const { storiesOf } = require("@storybook/react");12const { withStacks } = require("storybook-addon-stacks");13storiesOf("Test", module)14  .addDecorator(withStacks)15  .add("Test", () => <div>Test</div>);16const { storiesOf } = require("@storybook/react");17const { withStacks } = require("storybook-addon-stacks");18storiesOf("Test", module)19  .addDecorator(withStacks)20  .add("Test", () => <div>Test</div>);21const { storiesOf } = require("@storybook/react");22const { withStacks } = require("storybook-addon-stacks");23storiesOf("Test", module)24  .addDecorator(withStacks)25  .add("Test", () => <div>Test</div>);26const { storiesOf } = require("@storybook/react");27const { withStacks } = require("storybook-addon-stacks");28storiesOf("Test", module)29  .addDecorator(withStacks)30  .add("Test", () => <div>Test</div>);31const { storiesOf } = require("@storybook/react");32const { withStacks } = require("storybook-addon-stacks");33storiesOf("Test", module)34  .addDecorator(withStacks)35  .add("Test", () => <div>Test</div>);36const { storiesOf } = require("@storybook/react");37const { withStacks } = require("storybook-addon-stacks");38storiesOf("Test", module)

Using AI Code Generation

1import { configure } from '@kadira/storybook';2function loadStories() {3  require('../src/stories');4}5configure(loadStories, module);6import { setOptions } from '@kadira/storybook-addon-options';7setOptions({

Using AI Code Generation

1import { createRoot } from 'storybook-root';2import { configure, addDecorator } from '@storybook/react';3import { withKnobs } from '@storybook/addon-knobs';4import { withInfo } from '@storybook/addon-info';5import { withA11y } from '@storybook/addon-a11y';6import { withTests } from '@storybook/addon-jest';7import results from '../jest-test-results.json';8const req = require.context('../src', true, /\.stories\.js$/);9function loadStories() {10  req.keys().forEach(filename => req(filename));11}12addDecorator(withKnobs);13addDecorator(withInfo);14addDecorator(withA11y);15addDecorator(withTests({ results }));16const root = createRoot();17root.addDecorator(withKnobs);18root.addDecorator(withInfo);19root.addDecorator(withA11y);20root.addDecorator(withTests({ results }));21root.configure(loadStories, module);22configure(loadStories, module);23import React from 'react';24import { storiesOf } from '@storybook/react';25import { withKnobs, text } from '@storybook/addon-knobs';26import { withInfo } from '@storybook/addon-info';27import { withA11y } from '@storybook/addon-a11y';28import { withTests } from '@storybook/addon-jest';29import results from '../../jest-test-results.json';30import Button from '../src/components/Button';31storiesOf('Button', module)32  .addDecorator(withKnobs)33  .addDecorator(withInfo)34  .addDecorator(withA11y)35  .addDecorator(withTests({ results }))36  .add('with text', () => (37    <Button onClick={action('clicked')}>38      {text('Label', 'Hello Button')}39  .add('with some emoji', () => (40    <Button onClick={action('clicked')}>41  ));42import React from 'react';43import { storiesOf } from '@storybook/react';44import { withKnobs, text } from '@storybook/addon-knobs';45import { withInfo } from '@storybook/addon-info';46import { withA11y } from '@storybook/addon-a11y';47import { with

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.