{"id":13805296,"url":"https://github.com/WebLogin/trendchart-elements","last_synced_at":"2025-05-13T19:30:41.090Z","repository":{"id":160157730,"uuid":"632862234","full_name":"WebLogin/trendchart-elements","owner":"WebLogin","description":"Web components to generate simple charts representing trends","archived":false,"fork":false,"pushed_at":"2024-07-10T14:43:30.000Z","size":983,"stargazers_count":54,"open_issues_count":0,"forks_count":9,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-14T01:44:55.065Z","etag":null,"topics":["chart","lit","responsive","trend","web-component"],"latest_commit_sha":null,"homepage":"https://weblogin.github.io/trendchart-elements/demo/","language":"TypeScript","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/WebLogin.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2023-04-26T09:31:27.000Z","updated_at":"2025-03-12T20:32:45.000Z","dependencies_parsed_at":"2024-01-27T09:39:32.949Z","dependency_job_id":"d1dae2f7-04c7-415b-aebb-6d0e4937c5d2","html_url":"https://github.com/WebLogin/trendchart-elements","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebLogin%2Ftrendchart-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebLogin%2Ftrendchart-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebLogin%2Ftrendchart-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebLogin%2Ftrendchart-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WebLogin","download_url":"https://codeload.github.com/WebLogin/trendchart-elements/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254012967,"owners_count":21999345,"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":["chart","lit","responsive","trend","web-component"],"created_at":"2024-08-04T01:00:59.756Z","updated_at":"2025-05-13T19:30:40.722Z","avatar_url":"https://github.com/WebLogin.png","language":"TypeScript","funding_links":[],"categories":["Real World","Component Libraries"],"sub_categories":["Component Libraries"],"readme":"# TrendChart Elements\n\nWeb components to generate simple, light and responsive charts representing trends.\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"./docs/banner.jpg\" alt=\"Banner\" width=\"1000\"\u003e\n\u003c/p\u003e\n\nIt is often useful to display some simple charts to represent a data visualization trend without the need of a big chart library, TrendChart Elements is made for that. The aim was to be as plug-and-play as possible, like native HTML tags, so all the configuration is made with CSS variables and HTML attributes. It's fully responsive with built-in basic tooltip.\n\n`10.5ko` minified and gzipped, tree-shakeable, written in TypeScript, and no dependency except [Lit](https://github.com/lit/lit/) to create web components (50% of the package size). Tested on modern browsers : `Chrome \u003e= 73`, `Firefox \u003e= 63`, `Edge \u003e= 79`, `Safari \u003e= 12`.\n\n\n## Installation\n\nInstall the package with NPM :\n\n```\nnpm install @weblogin/trendchart-elements\n```\n\nImport into your project code :\n\n```javascript\n// All the charts\nimport '@weblogin/trendchart-elements';\n// Only some charts\nimport { TcLine } from \"@weblogin/trendchart-elements\";\n```\n\n\n## Update from V1\n\nSome of the markup has changed to make room for new features, have a look at the documentation below to find the new names.\n\n\n## Usage\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"./docs/demo-2.jpg\" alt=\"Demo\" width=\"1020\"\u003e\n    \u003cbr\u003e\n    \u003cb\u003eCheck out \u003ca href=\"https://weblogin.github.io/trendchart-elements/demo/\" target=\"_blank\"\u003ethe demo page\u003c/a\u003e for various charts stylings and use cases.\u003c/b\u003e\n\u003c/p\u003e\n\n```html\n\u003ctc-line values=\"[12,10,12,11,7,6,8,10,12]\"\u003e\u003c/tc-line\u003e\n\u003ctc-pie values=\"[35,68,22,16]\"\u003e\u003c/tc-pie\u003e\n\u003ctc-bar values=\"[11,7,6,8,10,12,8,10,12]\"\u003e\u003c/tc-bar\u003e\n\u003ctc-stack values=\"[24,18,19,7]\"\u003e\u003c/tc-stack\u003e\n```\n\nUse CSS to change the `width` and `height` of the chart, because they are responsive you can use percentages.\n\nIn some cases you'll need to have a radius around the chart if its container has one, for that just add a `border-radius` CSS rule to the chart.\n\nCharts configuration is made with CSS variables and HTML attributes :\n\t\n### HTML Attributes\n \n| Name | Default | Description |\n| :--- | :-----: | :---------- |\n| ➡️ **All charts** |||\n| `values` | - | Required - Array of numbers for the values, at least 2 for line and bar charts. Example : `values=\"[12,10,11]\"` |\n| `labels` | `[]` | Optional - Array of strings for the labels corresponding to the values, it needs to be the same length as `values` array. Example : `labels='[\"A\",\"B\",\"C\"]'` |\n| `static` | `false` | Optional - Boolean to disable tooltip and hover styling |\n| `tooltip-disabled` | `false` | Optional - Boolean to disable tooltip |\n| `tooltip-format` | `@L @V` | Optional - String to format the tooltip text. Two placeholders are available, `@V` for the current value and `@L` for the current label if present |\n| `max` | `0` | Optional - Number to change the max scale of the chart |\n| ➡️ **Line chart** |||\n| `min` | `0` | Optional - Number to change the min scale of the chart |\n| `weight` | `2` | Optional - Number for the line weight |\n| `point` | `undefined` | Optional - Number for the point weight, if not set it will be `weight + 6` |\n| `inside` | `false` | Optional - Boolean to draw the points inside the chart. Because the line touch the edges by default, the points have half of their size outside the chart. Usefull if all points are visible |\n| ➡️ **Bar chart** |||\n| `min` | `0` | Optional - Number to change the min scale of the chart |\n| `radius` | `2` | Optional - Number for the radius of the bars |\n| `horizontal` | `false` | Optional - Boolean to change the orientation to horizontal |\n| `gap` | `2` | Optional - Number for the gap between bars |\n| ➡️ **Stack chart** |||\n| `radius` | `2` | Optional - Number for the radius of the global bar |\n| `horizontal` | `false` | Optional - Boolean to change the orientation to horizontal |\n| `gap` | `2` | Optional - Number for the gap between bars |\n| ➡️ **Pie chart** |||\n| `donut` | `undefined` | Optional - Number to create a donut of the given weight |\n| `rotate` | `0` | Optional - Number in degrees to rotate the chart, 0 being the top |\n| `gap` | `2` | Optional - Number for the gap between slices |\n\nFor boolean ones you just have to set them on the tag, like this :\n\n```html\n\u003ctc-bar values=\"[3,9,10]\" static\u003e\u003ctc-bar\u003e\n```\n\n### CSS Variables\n \n| Name | Default | Description |\n| :--- | :-----: | :---------- |\n| ➡️ **All charts** |||\n| `--shape-color` | `#597BFC` | - |\n| `--shape-opacity` | `1` | - |\n| `--residual-color` | `black` | The residual represent unused space, for example if you set a `max` of 100 but the highest value is lower |\n| `--residual-opacity` | `0` | - |\n| `--tooltip-font-color` | `white` | - |\n| `--tooltip-font-size` | `0.875em` | - |\n| `--tooltip-font-weight` | `bold` | - |\n| `--tooltip-radius` | `3px` | - |\n| `--tooltip-padding` | `3px 4px` | - |\n| `--tooltip-background` | `black` | - |\n| `--tooltip-shadow` | `none` | - |\n| ➡️ **Line chart** |||\n| `--area-color` | `--shape-color` | The area represent the space under the line |\n| `--area-opacity` | `0` | - |\n| `--point-inner-color` | `--shape-color` | - |\n| `--point-border-color` | `--shape-color` | - |\n| `--point-opacity` | `0` | - |\n| `--point-opacity-active` | `1` | - |\n| ➡️ **Bar / Stack / Pie chart** |||\n| `--shape-color-x` | `--shape-color` | Color of the `x` shape starting at 1 : `--shape-color-1`, `--shape-color-2`, etc |\n| `--shape-opacity-active` |`0.5` | Opacity of the current active shape |\n\n### Events\n\nSeveral custom events are fired so you can react to them. For some events the `detail` property of the event contains associated data. Have a look at the bottom of the [demo page](https://weblogin.github.io/trendchart-elements/demo/#test-events) to see a test for events (in the console).\n\n| Name | Description | Detail |\n| ---- | ----------- | :----: |\n| `computed` | Fire everytime the chart is computed | `null` |\n| `shape-enter` | Fire on mouse enter a value shape | `Object` |\n| `shape-leave` | Fire on mouse leave a value shape | `Object` |\n| `shape-click` | Fire on mouse click on a value shape | `Object` |\n\n### JS API\n\nEven if TrendChart Elements is supposed to be used as a simple chart system, several properties are exposed so you can interact with the chart programmatically. In addition to the [HTML Attributes](#html-attributes) above, here are some other usefull ones :\n\n| Name | Description |\n| ---- | ----------- |\n| `valueShapes` | Array of `valueShape` objects. Each represent a value that will be displayed in the chart |\n| `valueShapeActive` | Getter for the current active `valueShape` object |\n| `active` | Index of the current active `valueShape`, can be used to manually set the active index |\n\n```js\n// \u003ctc-line values=\"[12,10,12,11,7,6,8,10,12]\"\u003e\u003c/tc-line\u003e\nconst lineChart = document.querySelector('tc-line');\nlineChart.active = 3;\n```\n\n## License\n\nTrendChart Elements is licensed under the [MIT license](https://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWebLogin%2Ftrendchart-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FWebLogin%2Ftrendchart-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWebLogin%2Ftrendchart-elements/lists"}