{"main":{"slug":"Area.svelte","contents":"<!--\n  @component\n  Generates an SVG area shape using the `area` function from [d3-shape](https://github.com/d3/d3-shape).\n -->\n<script>\n  import { getContext } from 'svelte';\n\n  const { data, xGet, yGet, xScale, yScale, extents } = getContext('LayerCake');\n\n  /**  @type {String} [fill='#ab0<PASSWORD>0'] The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */\n  export let fill = '#ab00d610';\n\n  $: path = 'M' + $data\n    .map(d => {\n      return $xGet(d) + ',' + $yGet(d);\n    })\n    .join('L');\n\n  let area;\n\n  $: {\n    const yRange = $yScale.range();\n    area = path + (\n      'L' + $xScale($extents.x ? $extents.x[1] : 0) + ',' + yRange[0] +\n      'L' + $xScale($extents.x ? $extents.x[0] : 0) + ',' + yRange[0] +\n      'Z'\n    );\n  }\n</script>\n\n<path class='path-area' d='{area}' {fill}></path>"},"dek":"","usedIn":[{"group":"Regular","matches":["/example/Brush","/example/Line"]},{"group":"SSR","matches":["/example-ssr/Brush","/example-ssr/Line"]}],"hasjsDoctable":true,"jsdocParsed":{"description":"","tags":[{"title":"param","description":"The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color.","type":{"type":"OptionalType","expression":{"type":"NameExpression","name":"String"}},"name":"fill","default":"'#ab00d610'"}]},"componentDescription":"Generates an SVG area shape using the `area` function from [d3-shape](https://github.com/d3/d3-shape).","modules":[]}