{"id":30593507,"url":"https://github.com/tpunt/lwc-plugin-shape-drawing","last_synced_at":"2025-08-29T18:34:20.811Z","repository":{"id":311614943,"uuid":"1042611673","full_name":"tpunt/lwc-plugin-shape-drawing","owner":"tpunt","description":"A plugin for the Lightweight Charts library to create shapes","archived":false,"fork":false,"pushed_at":"2025-08-25T13:33:45.000Z","size":24,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-25T15:37:22.494Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tpunt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2025-08-22T09:38:38.000Z","updated_at":"2025-08-23T09:27:08.000Z","dependencies_parsed_at":"2025-08-25T15:37:29.342Z","dependency_job_id":"9f3ef7d5-9285-4a41-9549-b61e7ae4eabc","html_url":"https://github.com/tpunt/lwc-plugin-shape-drawing","commit_stats":null,"previous_names":["tpunt/lwc-plugin-shape-drawing"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/tpunt/lwc-plugin-shape-drawing","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tpunt%2Flwc-plugin-shape-drawing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tpunt%2Flwc-plugin-shape-drawing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tpunt%2Flwc-plugin-shape-drawing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tpunt%2Flwc-plugin-shape-drawing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tpunt","download_url":"https://codeload.github.com/tpunt/lwc-plugin-shape-drawing/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tpunt%2Flwc-plugin-shape-drawing/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272738030,"owners_count":24984698,"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","status":"online","status_checked_at":"2025-08-29T02:00:10.610Z","response_time":87,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2025-08-29T18:34:18.859Z","updated_at":"2025-08-29T18:34:20.792Z","avatar_url":"https://github.com/tpunt.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Shape Drawing - Lightweight Charts™ Plugin\n\nThis plugin adds enables for arbitrary shapes to be drawn on the chart. It requires LWC version `5.0.0` or greater.\n\nShape features:\n - Border styling: colour, width, style, visibility\n - Fill styling: colour, opacity\n - Ability to drag corners of shapes, or the whole shape\n - Mutability: *true* (default) for interactivity (hovering/dragging), *false* for simply displaying the shape\n - Hovering: change border width, change fill opacity, show a custom shape on the corners (square or circle) and set its size, detect when hovering over the fill and/or the borders of a shape\n - Show/hide the time/price axis labels of the unique corners of a shape, including changing label/text colours and price/time formatters\n\nSee the `ShapeDrawingOptions` interface in `./src/options.ts` for setting these properties.\n\n## Visual Demo\n\n![shape-drawing-demo](https://github.com/user-attachments/assets/e5b28fdf-548a-4e3e-80f6-fb957e99bf71)\n\n## Running Locally\n\n```shell\nnpm install\nnpm run dev\n```\n\nVisit `localhost:5173` in the browser.\n\n## Code Example\n\n```js\n// Draw a triangle\nconst shape1 = new ShapeDrawing(\n\t[\n\t\t{ price: 100, time: 1755856347 },\n\t\t{ price: 100, time: 1755856347 },\n\t\t{ price: 500, time: 1755846347 },\n\t],\n\t{\n\t\tfillColor: '#ff0',\n\t\tfillOpacity: 0.5,\n\t\tborderColor: '#0ff',\n\t\tborderWidth: 5,\n\t\tborderStyle: LineStyle.Dashed,\n\t\tshowTimeAxisLabels: true,\n\t\tshowPriceAxisLabels: true,\n\t\tlabelColor: '#aaa',\n\t\tlabelTextColor: '#000',\n\t},\n);\n\nlineSeries.attachPrimitive(shape1);\n```\n\nIn `./src/example/example.ts`, the following is shown:\n\n\u003cimg width=\"1002\" height=\"503\" alt=\"demo screenshot\" src=\"https://github.com/user-attachments/assets/cd751349-9a9f-4f4c-858d-6d650419ea9f\" /\u003e\n\nThe file also shows an implementation of interactive drawing via clicking on the chart. E.g.\n\nhttps://github.com/user-attachments/assets/97dc1993-6dd6-4c50-b951-a008db28c577\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftpunt%2Flwc-plugin-shape-drawing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftpunt%2Flwc-plugin-shape-drawing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftpunt%2Flwc-plugin-shape-drawing/lists"}