Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use drawMargin method in storybook-root

Best JavaScript code snippet using storybook-root

violin_filter_component.ts

Source:violin_filter_component.ts

1/* Copyright 2020 The TensorFlow Authors. All Rights Reserved.2Licensed under the Apache License, Version 2.0 (the "License");3you may not use this file except in compliance with the License.4You may obtain a copy of the License at5    http://www.apache.org/licenses/LICENSE-2.06Unless required by applicable law or agreed to in writing, software7distributed under the License is distributed on an "AS IS" BASIS,8WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.9See the License for the specific language governing permissions and10limitations under the License.11==============================================================================*/12import {13  AfterViewInit,14  ChangeDetectionStrategy,15  Component,16  ElementRef,17  EventEmitter,18  Input,19  OnChanges,20  Output,21  SimpleChanges,22  ViewChild,23} from '@angular/core';24import * as d3 from '../../../../../third_party/d3';25import {RunColorScale} from '../../../../../types/ui';26import {MetricFilter} from './../../../store/npmi_types';27import {ViolinBin, ViolinChartData} from './../../../util/violin_data';28@Component({29  selector: 'violin-filter-component',30  templateUrl: './violin_filter_component.ng.html',31  styleUrls: ['./violin_filter_component.css'],32  changeDetection: ChangeDetectionStrategy.OnPush,33})34export class ViolinFilterComponent implements AfterViewInit, OnChanges {35  @Input() metricName!: string;36  @Input() filter!: MetricFilter;37  @Input() chartData!: {38    violinData: ViolinChartData;39    extremes: {min: number; max: number};40  };41  @Input() width!: number;42  @Input() colorScale!: RunColorScale;43  @Output() onRemove = new EventEmitter();44  @Output() onUpdateFilter = new EventEmitter<MetricFilter>();45  @ViewChild('chart', {static: true, read: ElementRef})46  private readonly chartContainer!: ElementRef<HTMLDivElement>;47  private readonly height = 300;48  private chartWidth: number = 0;49  private chartHeight: number = 0;50  private drawHeight: number = 0;51  private drawWidth: number = 0;52  private readonly margin = {top: 20, right: 10, bottom: 20, left: 10};53  private readonly drawMargin = {top: 0, right: 0, bottom: 20, left: 20};54  // Drawing containers55  private svg!: d3.Selection<56    SVGElement,57    unknown,58    HTMLElement | null,59    undefined60  >;61  private mainContainer!: d3.Selection<62    SVGGElement,63    unknown,64    HTMLElement | null,65    undefined66  >;67  private drawContainer!: d3.Selection<68    SVGGElement,69    unknown,70    HTMLElement | null,71    undefined72  >;73  // Containers for axis and dots74  private dotsGroup!: d3.Selection<75    SVGGElement,76    unknown,77    HTMLElement | null,78    undefined79  >;80  private xAxisGroup!: d3.Selection<81    SVGGElement,82    unknown,83    HTMLElement | null,84    undefined85  >;86  private yAxisGroup!: d3.Selection<87    SVGGElement,88    unknown,89    HTMLElement | null,90    undefined91  >;92  private miscGroup!: d3.Selection<93    SVGGElement,94    unknown,95    HTMLElement | null,96    undefined97  >;98  // Scales and axis99  private xScale!: d3.ScalePoint<string>;100  private xAxis?: d3.Axis<string>;101  private yScale!: d3.ScaleLinear<number, number>;102  private yAxis?: d3.Axis<number | {valueOf(): number}>;103  private xScaleNum!: d3.ScaleLinear<number, number>;104  // Brush105  private readonly brush: d3.BrushBehavior<unknown> = d3.brushY();106  // Misc107  private nanLine!: d3.Selection<108    SVGLineElement,109    unknown,110    HTMLElement | null,111    undefined112  >;113  private nanText!: d3.Selection<114    SVGTextElement,115    unknown,116    HTMLElement | null,117    undefined118  >;119  private zeroLine!: d3.Selection<120    SVGLineElement,121    unknown,122    HTMLElement | null,123    undefined124  >;125  private maxBinSize = 0;126  private readonly area = d3127    .area<ViolinBin>()128    .x0(129      function (this: ViolinFilterComponent, d: ViolinBin) {130        return this.xScaleNum(-d.length);131      }.bind(this)132    )133    .x1(134      function (this: ViolinFilterComponent, d: ViolinBin) {135        return this.xScaleNum(d.length);136      }.bind(this)137    )138    .y(139      function (this: ViolinFilterComponent, d: ViolinBin) {140        if (d.x0! === -Infinity) {141          return this.chartHeight - this.drawMargin.top;142        }143        return this.yScale((d.x1! + d.x0!) / 2.0);144      }.bind(this)145    )146    .curve(d3.curveCatmullRom);147  ngAfterViewInit(): void {148    this.updateDimensions();149    this.svg = d3.select(this.chartContainer.nativeElement).select('svg');150    this.mainContainer = this.svg151      .append('g')152      .attr('transform', `translate(${this.margin.left}, ${this.margin.top})`);153    this.drawContainer = this.mainContainer154      .append('g')155      .attr(156        'transform',157        `translate(${this.drawMargin.left}, ${this.drawMargin.top})`158      );159    this.dotsGroup = this.drawContainer.append('g').attr('class', 'dotsGroup');160    this.yAxisGroup = this.mainContainer161      .append('g')162      .attr('class', 'axis axis--y');163    this.xAxisGroup = this.mainContainer164      .append('g')165      .attr('class', 'axis axis--x');166    this.miscGroup = this.drawContainer.append('g');167    this.xScale = d3.scaleBand().padding(0.05);168    this.xAxis = d3.axisBottom(this.xScale);169    this.yScale = d3.scaleLinear().range([this.drawHeight, 0]);170    this.yAxis = d3.axisLeft(this.yScale);171    this.xScaleNum = d3.scaleLinear();172    this.initializeBrush();173    this.drawMisc();174    this.redraw();175  }176  ngOnChanges(changes: SimpleChanges) {177    if (this.svg) {178      this.redraw();179    }180  }181  redraw() {182    this.updateDimensions();183    this.setMaxBinSize();184    this.updateAxes();185    this.draw();186  }187  // Initializing/Updating the visualization props188  private updateDimensions() {189    this.chartWidth = this.width - this.margin.left - this.margin.right;190    this.drawWidth =191      this.chartWidth - this.drawMargin.left - this.drawMargin.right;192    this.chartHeight = this.height - this.margin.top - this.margin.bottom;193    this.drawHeight =194      this.chartHeight - this.drawMargin.top - this.drawMargin.bottom;195  }196  setMaxBinSize() {197    Object.values(this.chartData.violinData).forEach((dataElement) => {198      const lengths = dataElement.map((bin) => bin.length);199      const longest: number = Math.max(...lengths);200      this.maxBinSize = Math.max(longest, this.maxBinSize);201    });202  }203  updateAxes() {204    this.xScale205      .range([0, this.drawWidth])206      .domain(Object.keys(this.chartData.violinData));207    this.yScale.domain([208      this.chartData.extremes.min,209      this.chartData.extremes.max,210    ]);211    this.xScaleNum212      .range([0, this.xScale.bandwidth()])213      .domain([-this.maxBinSize, this.maxBinSize]);214  }215  initializeBrush() {216    this.brush.on('end', this.brushMoved.bind(this));217  }218  // Drawing UI219  draw() {220    this.drawAxes();221    this.drawPlot();222    this.refreshMisc();223    this.refreshBrush();224  }225  drawAxes() {226    this.yAxisGroup227      .attr(228        'transform',229        `translate(${this.drawMargin.left},230      ${this.drawMargin.top})`231      )232      .call(this.yAxis!);233    this.xAxisGroup234      .attr(235        'transform',236        `translate(${this.drawMargin.left},237      ${this.drawMargin.top + this.chartHeight})`238      )239      .call(this.xAxis!);240  }241  drawPlot() {242    const plots = this.dotsGroup243      .selectAll('.violin-plot')244      .data(Object.entries(this.chartData.violinData));245    plots246      .enter()247      .append('path')248      .attr('class', 'violin-plot')249      .style(250        'stroke',251        function (252          this: ViolinFilterComponent,253          d: [string, ViolinBin[]]254        ): string {255          return this.colorScale(d[0]);256        }.bind(this)257      )258      .style(259        'fill',260        function (261          this: ViolinFilterComponent,262          d: [string, ViolinBin[]]263        ): string {264          return `${this.colorScale(d[0])}33`;265        }.bind(this)266      )267      .attr(268        'transform',269        function (270          this: ViolinFilterComponent,271          d: [string, ViolinBin[]]272        ): string {273          return `translate(${this.xScale(d[0])}, 0)`;274        }.bind(this)275      )276      .datum(function (d: [string, ViolinBin[]]): ViolinBin[] {277        return d[1];278      })279      .attr('d', this.area);280    plots281      .attr(282        'transform',283        function (284          this: ViolinFilterComponent,285          d: [string, ViolinBin[]]286        ): string {287          return `translate(${this.xScale(d[0])}, 0)`;288        }.bind(this)289      )290      .datum(function (d: [string, ViolinBin[]]): ViolinBin[] {291        return d[1];292      })293      .attr('d', this.area);294    plots.exit().remove();295  }296  drawMisc() {297    this.zeroLine = this.miscGroup298      .append('line')299      .style('stroke', 'black')300      .attr('x1', 0)301      .attr('y1', this.yScale(0))302      .attr('x2', this.drawWidth)303      .attr('y2', this.yScale(0));304    this.nanText = this.miscGroup305      .append('text')306      .style('fill', 'black')307      .text('NaN')308      .attr('font-size', '10px')309      .attr('text-anchor', 'end')310      .attr('alignment-baseline', 'middle')311      .attr('x', -5)312      .attr('y', this.chartHeight - this.drawMargin.top);313    this.nanLine = this.miscGroup314      .append('line')315      .style('stroke', 'grey')316      .style('stroke-dasharray', '3, 3')317      .attr('x1', 0)318      .attr('y1', this.chartHeight - this.drawMargin.top)319      .attr('x2', this.drawWidth)320      .attr('y2', this.chartHeight - this.drawMargin.top);321  }322  refreshMisc() {323    this.zeroLine324      .attr('y1', this.yScale(0))325      .attr('x2', this.drawWidth)326      .attr('y2', this.yScale(0));327    this.nanText.attr('y', this.chartHeight - this.drawMargin.top);328    this.nanLine329      .attr('y1', this.drawHeight + this.drawMargin.top)330      .attr('x2', this.drawWidth)331      .attr('y2', this.drawHeight + this.drawMargin.top);332  }333  private refreshBrush() {334    this.brush.extent([335      [0, 0],336      [this.drawWidth, this.drawHeight + this.margin.top],337    ]);338    const brushPosition = [0, this.drawHeight + this.margin.top];339    if (this.filter.max < this.filter.min) {340      if (this.filter.includeNaN) {341        // Only NaN selected342        brushPosition[0] = this.yScale(this.chartData.extremes.min);343      } else {344        // Nothing selected345        brushPosition[0] = brushPosition[1];346      }347    } else {348      if (!this.filter.includeNaN) {349        // Min does not reach NaN350        const min = Math.max(this.chartData.extremes.min, this.filter.min);351        brushPosition[1] = this.yScale(min);352      }353      const max = Math.min(this.chartData.extremes.max, this.filter.max);354      brushPosition[0] = this.yScale(max);355    }356    this.drawContainer.call(this.brush).call(this.brush.move, brushPosition);357  }358  // Called on Interaction359  brushMoved() {360    if (!d3.event) return;361    if (!d3.event.sourceEvent) return;362    const extent = d3.event.selection;363    if (extent) {364      let includeNaN = false;365      let max = -2.0;366      let min = this.chartData.extremes.min;367      if (368        extent[0] <= this.drawHeight + this.margin.top &&369        extent[1] >= this.drawHeight370      ) {371        includeNaN = true;372      }373      if (extent[0] < this.drawHeight) {374        max = this.yScale.invert(extent[0]);375      }376      if (extent[1] < this.drawHeight) {377        min = this.yScale.invert(extent[1]);378      }379      this.onUpdateFilter.emit({380        max: max,381        min: min,382        includeNaN: includeNaN,383      });384    } else {385      this.onUpdateFilter.emit({386        max: 1.0,387        min: -1.0,388        includeNaN: true,389      });390    }391  }...

Using AI Code Generation

1import { addDecorator } from "@storybook/react";2import { withKnobs } from "@storybook/addon-knobs";3import { withA11y } from "@storybook/addon-a11y";4import { withInfo } from "@storybook/addon-info";5import { withTests } from "@storybook/addon-jest";6import { withOptions } from "@storybook/addon-options";7import { withViewport } from "@storybook/addon-viewport";8import { withConsole } from "@storybook/addon-console";9import { withBackgrounds } from "@storybook/addon-backgrounds";10import { withReadme } from "storybook-readme";11import { withCSSResources } from "@storybook/addon-cssresources";12import { withPerformance } from "storybook-addon-performance";13import { withDrawMargin } from "storybook-addon-draw-margin";14import { withPaddings } from "storybook-addon-paddings";15import { withStorysource } from "@storybook/addon-storysource";16import { withPropsTable } from "storybook-addon-react-docgen";17import { withJSX } from "@storybook/addon-jsx";18import results from "../.jest-test-results.json";19import { withTheme } from "../src/theme/withTheme";20import { themes } from "../src/theme/themes";21const withThemeOptions = {22};23addDecorator(withKnobs);24addDecorator(withA11y);25addDecorator(withInfo);26addDecorator(withTests({ results }));27addDecorator(withOptions);28addDecorator(withViewport);29addDecorator(withConsole);30addDecorator(withBackgrounds);31addDecorator(withReadme);32addDecorator(withCSSResources);33addDecorator(withPerformance);34addDecorator(withDrawMargin);35addDecorator(withPaddings);36addDecorator(withStorysource);37addDecorator(withPropsTable);38addDecorator(withJSX);39addDecorator(withTheme(withThemeOptions));40import { configure } from "@storybook/react";41import { setOptions } from "@storybook/addon-options";42import { addDecorator } from "@storybook/react";43import { withInfo } from "@storybook/addon-info";44import { withTests } from "@storybook/addon-jest";45import { withKnobs } from "@storybook/addon-knobs";46import { withConsole } from "@storybook/addon-console";47import { withViewport } from "@storybook/addon-viewport";48import { withA11y } from "@storybook/addon-a11y";49import {

Using AI Code Generation

1import { configure, addDecorator } from '@storybook/react';2import { withInfo } from '@storybook/addon-info';3import { withKnobs } from '@storybook/addon-knobs';4import { withA11y } from '@storybook/addon-a11y';5import { withViewport } from '@storybook/addon-viewport';6import { withOptions } from '@storybook/addon-options';7import { setOptions } from '@storybook/addon-options';8import { setDefaults } from '@storybook/addon-info';9import { withBackgrounds } from '@storybook/addon-backgrounds';10import { withConsole } from '@storybook/addon-console';11setOptions({

Using AI Code Generation

1import { storiesOf } from '@storybook/react';2import { action } from '@storybook/addon-actions';3import { linkTo } from '@storybook/addon-links';4import { Button, Welcome } from '@storybook/react/demo';5storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);6storiesOf('Button', module)7  .add('with text', () => (8    <Button onClick={action('clicked')}>Hello Button</Button>9  .add('with some emoji', () => (10    <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>11  ));12storiesOf('Button', module)13  .addDecorator(story => (14      style={{15      }}16      {story()}17  .add('with text', () => (18    <Button onClick={action('clicked')}>Hello Button</Button>19  .add('with some emoji', () => (20    <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>21  ));22storiesOf('Button', module)23  .addDecorator(story => (24      style={{25      }}26      {story()}27  .add('with text', () => (28    <Button onClick={action('clicked')}>Hello Button</Button>29  .add('with some emoji', () => (30    <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>31  .add('with some emoji and action', () => (32    <Button onClick={action('this was clicked')}>33  ));34storiesOf('Button', module)35  .addDecorator(story => (36      style={{37      }}38      {story()}

Using AI Code Generation

1import { drawMargin } from 'storybook-root'2drawMargin(0.5)3drawMargin(0.5)4import { drawMargin } from 'storybook-root'5drawMargin(0.5)6drawMargin(0.5)7import { drawMargin } from 'storybook-root'8drawMargin(0.5)9drawMargin(0.5)10import { drawMargin } from 'storybook-root'11drawMargin(0.5)12drawMargin(0.5)13import { drawMargin } from 'storybook-root'14drawMargin(0.5)15drawMargin(0.5)16import { drawMargin } from 'storybook-root'17drawMargin(0.5)18drawMargin(0.5)19import { drawMargin } from 'storybook-root'20drawMargin(0.5)21drawMargin(0.5)22import { drawMargin } from 'storybook-root'23drawMargin(0.5)

Using AI Code Generation

1import { drawMargin } from 'storybook-root'2drawMargin(10)3import drawMargin from './drawMargin'4export { drawMargin }5export default function drawMargin(margin) {6  console.log('margin is', margin)7}

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.