{"id":13426087,"url":"https://github.com/mhkeller/layercake","last_synced_at":"2025-05-13T21:04:12.769Z","repository":{"id":37953000,"uuid":"141244256","full_name":"mhkeller/layercake","owner":"mhkeller","description":"graphics framework for sveltejs","archived":false,"fork":false,"pushed_at":"2025-04-27T20:41:45.000Z","size":48519,"stargazers_count":1558,"open_issues_count":17,"forks_count":36,"subscribers_count":12,"default_branch":"main","last_synced_at":"2025-04-28T12:00:06.916Z","etag":null,"topics":["cake","charts","dataviz","delicious","dessert","graphics","layercake","layers","svelte","sveltejs"],"latest_commit_sha":null,"homepage":"https://layercake.graphics","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mhkeller.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-07-17T06:49:33.000Z","updated_at":"2025-04-27T20:41:49.000Z","dependencies_parsed_at":"2024-03-28T20:44:28.625Z","dependency_job_id":"e7ba859f-92a2-498d-96c1-facc6cc8426d","html_url":"https://github.com/mhkeller/layercake","commit_stats":null,"previous_names":[],"tags_count":64,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mhkeller%2Flayercake","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mhkeller%2Flayercake/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mhkeller%2Flayercake/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mhkeller%2Flayercake/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mhkeller","download_url":"https://codeload.github.com/mhkeller/layercake/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251311332,"owners_count":21569008,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cake","charts","dataviz","delicious","dessert","graphics","layercake","layers","svelte","sveltejs"],"created_at":"2024-07-31T00:01:26.029Z","updated_at":"2025-04-28T12:00:13.046Z","avatar_url":"https://github.com/mhkeller.png","language":"Svelte","funding_links":[],"categories":["JavaScript","Web Frontend","Svelte","UI Components","Sites","Charts","Charts \u0026 Data Visualization"],"sub_categories":["Svelte","Charts"],"readme":"Layer Cake  [\u003cimg src=\"https://raw.githubusercontent.com/mhkeller/layercake.graphics/main/static/layercake-logo-500x400.png\" width=\"115\" align=\"right\" alt=\"layercake-logo\"\u003e](https://mhkeller.github.io/layercake)\n===\n\n\u003e a framework for mostly-reusable graphics with [svelte](https://github.com/sveltejs/svelte)\n\n[![Tests badges](https://github.com/mhkeller/layercake/actions/workflows/node.js.yml/badge.svg)](https://github.com/mhkeller/layercake/actions/workflows/node.js.yml) [![npm version](https://img.shields.io/npm/v/layercake.svg)](https://npmjs.org/package/layercake) [![npm](https://img.shields.io/npm/dm/layercake.svg)](https://www.npmjs.com/package/layercake)\n\n 🍰 [See examples](https://layercake.graphics)\n 🍰 [Read the guide](https://layercake.graphics/guide)\n 🍰 [API docs](https://layercake.graphics/guide#layercake-props)\n 🍰 [View the Component Gallery](https://layercake.graphics/components)\n 🍰 [Try the starter template](https://github.com/mhkeller/layercake-template)\n\n## Svelte versions\n\nWorks with Svelte 3 through 5. Note the library itself does not use runes but it is compatible with Svelte 5. This will change in [future versions](https://github.com/mhkeller/layercake/issues/156).\n\n## Install\n\n```sh\nnpm install --save layercake\n```\n\n## Example\n\n```svelte\n\u003cscript\u003e\n  // The library provides a main wrapper component\n  // and a bunch empty layout components...\n  import { LayerCake, Svg, Html, Canvas } from 'layercake';\n\n  // ...that you fill with your own chart components,\n  // that live inside your project and which you\n  // can copy and paste from here as starting points.\n  import AxisX from './components/AxisX.svelte';\n  import AxisY from './components/AxisY.svelte';\n  import Line from './components/Line.svelte';\n  import Scatter from './components/Scatter.svelte';\n  import Labels from './components/Labels.svelte';\n\n  const data = [\n    { x: 0, y: 1 },\n    { x: 1, y: 2 },\n    { x: 2, y: 3 }\n  ];\n\u003c/script\u003e\n\n\u003cstyle\u003e\n  .chart-container {\n    width: 100%;\n    height: 500px;\n  }\n\u003c/style\u003e\n\n\u003cdiv class=\"chart-container\"\u003e\n  \u003cLayerCake\n    x='x'\n    y='y'\n    {data}\n  \u003e\n    \u003cSvg\u003e\n      \u003cAxisX/\u003e\n      \u003cAxisY/\u003e\n      \u003cLine color='#f0c'/\u003e\n    \u003c/Svg\u003e\n\n    \u003cCanvas\u003e\n      \u003cScatter color='#0fc'/\u003e\n    \u003c/Canvas\u003e\n\n    \u003cHtml\u003e\n      \u003cLabels/\u003e\n    \u003c/Html\u003e\n  \u003c/LayerCake\u003e\n\u003c/div\u003e\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmhkeller%2Flayercake","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmhkeller%2Flayercake","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmhkeller%2Flayercake/lists"}