{"id":18127780,"url":"https://github.com/kis/scale","last_synced_at":"2025-04-15T07:23:14.438Z","repository":{"id":57179039,"uuid":"60704628","full_name":"kis/scale","owner":"kis","description":"Angular plugin for creating charts","archived":false,"fork":false,"pushed_at":"2022-10-25T08:46:30.000Z","size":11933,"stargazers_count":41,"open_issues_count":0,"forks_count":2,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-09-28T09:02:48.687Z","etag":null,"topics":["angular-plugin","barchart","chart","kinopoisk","timeline","timesheet"],"latest_commit_sha":null,"homepage":"https://chartify.github.io/scale/example/","language":"JavaScript","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/kis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-06-08T14:34:40.000Z","updated_at":"2022-11-25T06:45:48.000Z","dependencies_parsed_at":"2022-09-09T17:12:18.982Z","dependency_job_id":null,"html_url":"https://github.com/kis/scale","commit_stats":null,"previous_names":["kirillstepkin/scale"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kis%2Fscale","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kis%2Fscale/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kis%2Fscale/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kis%2Fscale/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kis","download_url":"https://codeload.github.com/kis/scale/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249024424,"owners_count":21200116,"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":["angular-plugin","barchart","chart","kinopoisk","timeline","timesheet"],"created_at":"2024-11-01T09:23:46.508Z","updated_at":"2025-04-15T07:23:14.274Z","avatar_url":"https://github.com/kis.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Scale\n\n[![NPM Version](https://img.shields.io/npm/v/angular-scale.svg)](https://www.npmjs.com/package/angular-scale)\n[![Download Month](https://img.shields.io/npm/dm/angular-scale.svg)](https://www.npmjs.com/package/angular-scale)\n[![Download Total](https://img.shields.io/npm/dt/angular-scale.svg)](https://www.npmjs.com/package/angular-scale)\n\n![alt text](https://raw.githubusercontent.com/kirillstepkin/scale/master/img/placeit1.jpg)\n\nAngular plugin for building scale of items. Chart ruler completely on HTML/CSS/JS. Bar chart, line chart, calendar view visualisation. Diagram, graph, pyramid visualisation of large datasets. Showreel. The source for this module is in the [main repo](https://github.com/kirillstepkin/scale). Please create issues and pull requests.\n\n![alt text](https://raw.githubusercontent.com/kirillstepkin/scale/master/img/output_eSVfyQ.gif)\n\nInspired by [kinopoisk.ru](https://www.kinopoisk.ru/) chart written using Adobe Flash. But this chart is just on HTML/CSS without using libraries. Feel free for contribute.\n\n![alt text](https://raw.githubusercontent.com/kirillstepkin/scale/master/img/84d858c0af.png)\n\n### Install\n\n```\nbower install angular-scale \nnpm install angular-scale \n```\n\n### Use\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml ng-app=\"myApp\"\u003e\n\t\u003chead\u003e\n\t\t\u003cmeta charset=\"utf-8\"\u003e\n\t\t\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"../scale.css\"\u003e\n\t\u003c/head\u003e\n\t\u003cbody ng-controller=\"main\"\u003e\n\t\t\u003cscale data=\"data\" \n\t\t\t   width=\"50\" \n\t\t\t   height=\"10\"\n\t\t\t   box-size=\"14\"\n\t\t\t   line=\"true\"\n\t\t\t   theme=\"default\"\u003e\n\t\t\u003c/scale\u003e\n\n\t\t\u003cscript src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js\"\u003e\u003c/script\u003e\n\t\t\u003cscript src=\"../scale.js\"\u003e\u003c/script\u003e\n\t\t\u003cscript src=\"./index.js\"\u003e\u003c/script\u003e\n\t\u003c/body\u003e\n\u003c/html\u003e\n```\n\n```javascript\nangular.module('myApp', ['scale']).controller('main', ['$scope', function($scope) {\n\t$scope.data = [];\n\n\tvar SCALE_WIDTH = 50,\n\t    SCALE_HEIGHT = 10;\n\n\tfor (var i=0; i \u003c SCALE_WIDTH; i++) {\n\t\tvar value = Math.floor(Math.random() * SCALE_HEIGHT + 1);\n\n\t\t$scope.data.push({\n\t\t\tvalue: value, //Value from 1 to SCALE_HEIGHT\n\t\t\ttitle: (i + 1) + \" item\" //Description\n\t\t});\n\t}\n}]);\n```\n\n### Options\n\n```html\n\u003cscale data=\"data\" \n\t   width=\"50\" \n\t   height=\"10\"\n\t   box-size=\"14\"\n\t   line=\"true\"\n\t   theme=\"default\"\u003e\n\u003c/scale\u003e\n```\n\n* **data** is an array of objects [{value: 0}, ... , {value: 10}]. This is the dataset of the chart.\n* **width** is the horizontal length of the data array. If width param is less than the length of the data array then user will see the last values of the data array. \n* **height** is the vertical length.\n* **box-size** is size of each box in pixels.\n\n![alt text](https://raw.githubusercontent.com/kirillstepkin/scale/master/img/46cd396faa.jpg)\n\n* **line** is param that determines if this is a line-chart.\n\n![alt text](https://raw.githubusercontent.com/kirillstepkin/scale/master/img/a03def3092.jpg)\n\n* **theme** is color scheme of the chart.\n\n![alt text](https://raw.githubusercontent.com/kirillstepkin/scale/master/img/a657bab0f7.jpg)\n\nPlease check the example folder to see how it's going on practice.\n\n### Themes\n\n* default\n* purple\n* grey\n\n![alt text](https://raw.githubusercontent.com/kirillstepkin/scale/master/img/024486fd94.jpg)\n\n### Changelog\n\n* 10/02/2016 Implemented tooltips.\n* 10/01/2016 Implemented different color schemes.\n* 09/20/2016 Rewriting the project as an Angular.js plugin.\n* 06/05/2016 Finished writing function for calculating angle of the line that connects the points of the chart. Rendering chart.\n\n### License\n\nCopyright (c) 2016 [Kirill Stepkin](https://www.npmjs.com/~kirillstyopkin)\n\nInspired by [kinopoisk.ru](https://www.kinopoisk.ru/) chart.\n\n[![npm](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](https://github.com/kirillstepkin/scale)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkis%2Fscale","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkis%2Fscale","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkis%2Fscale/lists"}