{"id":13984303,"url":"https://github.com/gridpoint-com/plox","last_synced_at":"2025-10-21T18:35:53.018Z","repository":{"id":220179918,"uuid":"747403864","full_name":"gridpoint-com/plox","owner":"gridpoint-com","description":"Server-side rendered SVG graphing components for Phoenix and LiveView","archived":false,"fork":false,"pushed_at":"2025-07-12T00:33:45.000Z","size":602,"stargazers_count":96,"open_issues_count":8,"forks_count":5,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-07-14T03:39:56.659Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://hex.pm/packages/plox","language":"Elixir","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/gridpoint-com.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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-01-23T21:23:59.000Z","updated_at":"2025-07-11T23:35:08.000Z","dependencies_parsed_at":"2024-06-12T01:12:21.215Z","dependency_job_id":"0172f6d5-85a8-463a-a4b7-4bd0337193aa","html_url":"https://github.com/gridpoint-com/plox","commit_stats":null,"previous_names":["gridpoint-com/plox"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/gridpoint-com/plox","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gridpoint-com%2Fplox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gridpoint-com%2Fplox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gridpoint-com%2Fplox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gridpoint-com%2Fplox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gridpoint-com","download_url":"https://codeload.github.com/gridpoint-com/plox/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gridpoint-com%2Fplox/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266404940,"owners_count":23923490,"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-07-21T11:47:31.412Z","response_time":64,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"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":"2024-08-09T06:00:37.106Z","updated_at":"2025-10-21T18:35:52.897Z","avatar_url":"https://github.com/gridpoint-com.png","language":"Elixir","funding_links":[],"categories":["Data Visualization"],"sub_categories":[],"readme":"\u003cimg width=\"400\" src=\"images/logo-plot@2x.png#gh-light-mode-only\" alt=\"Plox\"\u003e\n\u003cimg width=\"400\" src=\"images/logo-plot-dark@2x.png#gh-dark-mode-only\" alt=\"Plox\"\u003e\n\n---\n\n[![Build Status](https://github.com/gridpoint-com/plox/actions/workflows/ci.yml/badge.svg)](https://github.com/gridpoint-com/plox/actions) [![Hex.pm](https://img.shields.io/hexpm/v/plox.svg)](https://hex.pm/packages/plox) [![Documentation](https://img.shields.io/badge/documentation-gray)](https://hexdocs.pm/plox/)\n\nServer-side rendered SVG graphing components for Phoenix and LiveView.\n\n## Installation\n\nPlox is [available in Hex](https://hex.pm/packages/plox), the package can be\ninstalled by adding `plox` to your list of dependencies in `mix.exs`:\n\n```elixir\ndef deps do\n  [\n    {:plox, \"~\u003e 0.1.0\"}\n  ]\nend\n```\n\nDocumentation is published on [HexDocs](https://hexdocs.pm) and can be found at\n\u003chttps://hexdocs.pm/plox\u003e.\n\n## Example\n\n\u003cimg width=\"740\" src=\"images/readme-example-plot@2x.png\" alt=\"Example screenshot\"\u003e\n\nStart by setting up your data, scales, and dataset:\n\n```elixir\ndata = [\n  %{date: ~D[2023-08-01], value: 35.0},\n  %{date: ~D[2023-08-02], value: 60.0},\n  %{date: ~D[2023-08-03], value: 65.0},\n  %{date: ~D[2023-08-04], value: 10.0},\n  %{date: ~D[2023-08-05], value: 50.0}\n]\n\ndate_scale = date_scale(Date.range(~D[2023-08-01], ~D[2023-08-05]))\nnumber_scale = number_scale(0.0, 80.0)\n\ndataset =\n  dataset(data,\n    x: {date_scale, \u0026 \u00261.date},\n    y: {number_scale, \u0026 \u00261.value}\n  )\n```\n\nOnce you have those, you can build a `Plox.Graph` struct:\n\n```elixir\nexample_graph =\n  to_graph(\n    scales: [date_scale: date_scale, number_scale: number_scale],\n    datasets: [dataset: dataset]\n  )\n```\n\nFinally, render the `Plox.Graph` directly within your HEEx template:\n\n```html\n\u003c.graph :let={graph} id=\"example_graph\" for={@example_graph} width=\"800\" height=\"250\"\u003e\n  \u003c:legend\u003e\n    \u003c.legend_item color=\"#EC7E16\" label=\"Data\" /\u003e\n  \u003c/:legend\u003e\n\n  \u003c.x_axis :let={date} scale={graph[:date_scale]}\u003e\n    \u003c%= Calendar.strftime(date, \"%-m/%-d\") %\u003e\n  \u003c/.x_axis\u003e\n\n  \u003c.y_axis :let={value} scale={graph[:number_scale]} ticks={5}\u003e\n    \u003c%= value %\u003e\n  \u003c/.y_axis\u003e\n\n  \u003c.line_plot dataset={graph[:dataset]} color=\"#EC7E16\" /\u003e\n\n  \u003c.points_plot dataset={graph[:dataset]} color=\"#EC7E16\" /\u003e\n\u003c/.graph\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgridpoint-com%2Fplox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgridpoint-com%2Fplox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgridpoint-com%2Fplox/lists"}