{"id":17783358,"url":"https://github.com/indus/dv-scalebar","last_synced_at":"2025-08-12T22:32:49.817Z","repository":{"id":260615988,"uuid":"879145095","full_name":"indus/dv-scalebar","owner":"indus","description":"a scalebar web-component for vertical and horizontal usage that scales responsive and allows styling via CSS variables.","archived":false,"fork":false,"pushed_at":"2024-11-01T15:15:13.000Z","size":1766,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-12-02T03:47:00.717Z","etag":null,"topics":["lit","lit-element","scalebar","vue","vue3","vuejs","web-component"],"latest_commit_sha":null,"homepage":"https://dv-scalebar.js.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/indus.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":"2024-10-27T05:29:59.000Z","updated_at":"2024-11-04T16:10:00.000Z","dependencies_parsed_at":"2024-11-01T12:17:39.761Z","dependency_job_id":"3331a175-25c3-447e-833b-d08f1fc4ac1f","html_url":"https://github.com/indus/dv-scalebar","commit_stats":null,"previous_names":["indus/dv-scalebar"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/indus%2Fdv-scalebar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/indus%2Fdv-scalebar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/indus%2Fdv-scalebar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/indus%2Fdv-scalebar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/indus","download_url":"https://codeload.github.com/indus/dv-scalebar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229714240,"owners_count":18112681,"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":["lit","lit-element","scalebar","vue","vue3","vuejs","web-component"],"created_at":"2024-10-27T07:03:21.878Z","updated_at":"2024-12-14T14:25:47.824Z","avatar_url":"https://github.com/indus.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dv-scalebar\ncomes in two flavours -  \nAs a framework-agnostic web component, and as a Vue component with minimal overhead.\n\n### [Documentation with live examples](https://dv-scalebar.js.org/)\n\n## Getting Started\n\nThe scalebar component is cross-built as a framework-agnostic web component\ncreated with [Lit](https://lit.dev/) and as a framework-specific\n[Vue](https://vuejs.org/) component. The Lit version is compatible with any\nframework, vanilla JS, or plain HTML, with a size of approximately\n`69kB (26kB gzip)`. The Vue version, on the other hand, can only be used in\nVue projects but is lighter at around `51kB (20kB gzip)` and is more\nversatile.\n\nThese sizes include dv-scalebar's only dependency,\n[chroma.js](https://gka.github.io/chroma.js/)\n\n##### Smaller builds without dependencies\n\nFor projects where chroma.js is already in use, builds of the scalebar component\nthat exclude this dependency are available. This reduces its size significantly,\nto about `26kB (9kB gzip)` for the Lit version and `9kB (3kB gzip)` for the\nVue version.\n\n### Intallation\n\n```sh\n$ npm install dv-scalebar\n```\n\n### Lit\n\nThe Lit version of the component is highly versatile and can be used in various environments; with or without a framework, and with or without a bundler. Typically, you only need to import the component in JavaScript...\n\n``` JS\nimport \"dv-scalebar/lit\"\n```\n...and then use it in the HTML. \n``` HTML\n\u003cdv-scalebar colors labels ticks\u003e\u003c/dv-scalebar\u003e\n```\n\n### Vue\n\n\nIn Vue, the use of Single File Components (SFCs, or .vue files) is quite common. To use `dv-scalebar` in an SFC, import it in the `\u003cscript\u003e` section before referencing it in the `\u003ctemplate\u003e` or render function.\n\nThe `dv-scalebar/sfc` path targets an SFC version that uses TypeScript and includes scoped styles. Alternatively, you can import the pre-built Vue component from `dv-scalebar/vue` and separately import the style file.\n\n\n``` Vue\n\u003cscript setup lang=\"ts\"\u003e\nimport dvScalebar from \"dv-scalebar/sfc\"\n//import dvScalebar from \"dv-scalebar/vue\"\n//import \"dv-scalebar/style.css\"\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdv-scalebar colors labels ticks/\u003e\n\u003c/template\u003e\n```\n#### Reactivity\nThe following example demonstrates the binding of reactive variables to attributes of the scalebar component in Vue:\n\n``` Vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref } from 'vue';\nimport dvScalebar from 'dv-scalebar/sfc'\n\n// calls a function periodiclly with a random integer\nconst intervalRandom = (fn: (r: number) =\u003e void, r: number, ms: number) =\u003e\n  setInterval(() =\u003e fn(Math.floor(Math.random() * r)), ms)\n\nconst COLORS = [\"OrRd\",\"PuBu\",\"BuPu\",\"BuGn\",\"YlOr\",\"YlGn\",\"RdPu\",\"YlGn\"];\n\n// reactive variables\nconst num = ref(0); \nconst col = ref(COLORS[0]);\n\n// run intervals\nintervalRandom(r =\u003e num.value = r, 10, 500);\nintervalRandom(r =\u003e col.value = COLORS[r], COLORS.length, 700);\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdv-scalebar :colors=\"col\" :ticks=\"num\" labels /\u003e\n\u003c/template\u003e\n```\n\nThe use of multiple attributes in the above example can be simplified with `v-bind` like so...\n\n``` Vue\n\u003ctemplate\u003e\n  \u003cdv-scalebar v-bind={colors:col, ticks:num, labels:true} /\u003e\n\u003c/template\u003e\n```\n\n... or even with a single reactive configuration object:\n\n``` Vue\n\u003cscript setup lang=\"ts\"\u003e\n/* .... */\n\n// reactive variable\nconst sb = ref({colors:COLORS[0],ticks:0,labels:true}); \n\n// run intervals\nintervalRandom(r =\u003e sb.value.ticks = r, 10, 500);\nintervalRandom(r =\u003e sb.value.colors = COLORS[r], COLORS.length, 700);\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdv-scalebar v-bind=\"sb\"\u003e\u003c/dv-scalebar\u003e\n\u003c/template\u003e\n``` \n\n## Usage\n\nThis page demonstrates some basic attributes that can be used to modify the scalebar component. For more detailed examples, refer to the sections in the side navigation.\n\n### \"Hello World\" Example\n\nWithout any attributes, the scalebar renders as a simple grayscale gradient.\n\n**Code**\n```html{4}\n\u003cdv-scalebar\u003e\u003c/dv-scalebar\u003e\n```\n[Results](https://dv-scalebar.js.org/docs/usage#hello-world-example)\n\n### \"Real World\" Examples\n\nThe scalebar can be enhanced with basic attributes such as [`colors`](https://dv-scalebar.js.org/docs/colors), [`labels`](https://dv-scalebar.js.org/docs/labels), [`ticks`](https://dv-scalebar.js.org/docs/ticks), and [`classes`](https://dv-scalebar.js.org/docs/classes), as well as layout properties like [`vertical`](https://dv-scalebar.js.org/docs/vertical), [`reverse`](https://dv-scalebar.js.org/docs/reverse), and [`before`](https://dv-scalebar.js.org/docs/before)/[`after`](https://dv-scalebar.js.org/docs/after).\n\n**Code**\n```html{4}\n\u003cdv-scalebar colors=\"Viridis\" labels=\"0,2,4,6,8,10\" ticks=\"11\"\u003e\u003c/dv-scalebar\u003e\n\u003cdv-scalebar colors=\"Viridis\" labels=\"low,medium,high\" classes ticks\u003e\u003c/dv-scalebar\u003e\n\u003cdv-scalebar colors=\"piYG\" before=\"slategray\" labels ticks=\"5\"\u003e\u003c/dv-scalebar\u003e\n\u003cdv-scalebar colors=\"piYG\" labels=\"min,-1σ,0,1σ,max\" classes=\"0,.16,.5,.84,1\" ticks\u003e\u003c/dv-scalebar\u003e\n\n\u003cdv-scalebar vertical colors=\"PuBuGn\" labels ticks=\"0,.1,.3,.6,1\"\u003e\u003c/dv-scalebar\u003e\n\u003cdv-scalebar vertical colors=\"YlGnBu\" labels=\"low,medium,high\" classes=\"0,.16,.84,1\" ticks\u003e\u003c/dv-scalebar\u003e\n\u003cdv-scalebar vertical colors=\"BrBG\" reverse labels=\"-80,-40,0,70,140\" ticks=\"9\"\u003e\u003c/dv-scalebar\u003e\n\u003cdv-scalebar vertical colors=\"dodgerblue,orangered\" reverse labels=\"6°,10°,20°,27°\" ticks=\"0,.19,0.66,1\" before after\u003e\u003c/dv-scalebar\u003e\n```\n[Results](https://dv-scalebar.js.org/docs/usage#real-world-examples)\n\n### Colors\n\n**Code**\n```html{4}\n\u003cdv-scalebar colors\u003e\u003c/dv-scalebar\u003e\n\u003cdv-scalebar colors=\"teal\"\u003e\u003c/dv-scalebar\u003e\n\u003cdv-scalebar colors=\"rgb(70 100 250 / .5)\"\u003e\u003c/dv-scalebar\u003e\n\u003cdv-scalebar colors=\"yellow,red,black\"\u003e\u003c/dv-scalebar\u003e\n\u003cdv-scalebar colors=\"Viridis\"\u003e\u003c/dv-scalebar\u003e\n```\n[Results](https://dv-scalebar.js.org/docs/usage#colors)\n\n### Labels\n\n**Code**\n```html{4}\n\u003cdv-scalebar colors=\"OrRd\" labels\u003e\u003c/dv-scalebar\u003e\n\u003cdv-scalebar colors=\"OrRd\" labels=\"9\"\u003e\u003c/dv-scalebar\u003e\n\u003cdv-scalebar colors=\"OrRd\" labels=\"zero,50,1e2\"\u003e\u003c/dv-scalebar\u003e\n```\n[Results](https://dv-scalebar.js.org/docs/usage#labels)\n\n### Ticks\n\n**Code**\n```html{4}\n\u003cdv-scalebar colors=\"PuOr\" ticks\u003e\u003c/dv-scalebar\u003e\n\u003cdv-scalebar colors=\"PuOr\" ticks=\"11\"\u003e\u003c/dv-scalebar\u003e\n\u003cdv-scalebar colors=\"PuOr\" ticks=\"0,.1,.3,.6,1\"\u003e\u003c/dv-scalebar\u003e\n```\n[Results](https://dv-scalebar.js.org/docs/usage#ticks)\n\n### Classes\n\n**Code**\n```html{4}\n\u003cdv-scalebar colors=\"orange,snow,teal\" classes\u003e\u003c/dv-scalebar\u003e\n\u003cdv-scalebar colors=\"orange,snow,teal\" classes=\"9\"\u003e\u003c/dv-scalebar\u003e\n\u003cdv-scalebar colors=\"orange,snow,teal\" classes=\"0,.1,.3,.6,1\"\u003e\u003c/dv-scalebar\u003e\n```\n[Results](https://dv-scalebar.js.org/docs/usage#classes)\n\n### More\n\nThis was a brief overview of the four most common attributes. They are explained in more detail in the [Documentation](https://dv-scalebar.js.org/docs/), along with additional layout and color attributes. ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findus%2Fdv-scalebar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Findus%2Fdv-scalebar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findus%2Fdv-scalebar/lists"}