Skip to content

Commit

Permalink
Merge pull request #28 from natterstefan/feature/typescript
Browse files Browse the repository at this point in the history
feat: refactored JavaScript to TypeScript
  • Loading branch information
nagi1 authored Oct 5, 2022
2 parents 53dea68 + cea1d12 commit 5528281
Show file tree
Hide file tree
Showing 21 changed files with 4,357 additions and 1,692 deletions.
61 changes: 61 additions & 0 deletions .all-contributorsrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
{
"projectName": "hill-chart",
"projectOwner": "nagi1",
"repoType": "github",
"repoHost": "https://github.com",
"files": [
"README.md"
],
"imageSize": 100,
"commit": false,
"commitConvention": "eslint",
"contributors": [
{
"login": "nagi1",
"name": "Ahmed Nagi",
"avatar_url": "https://avatars.githubusercontent.com/u/16584220?v=4",
"profile": "https://github.com/nagi1",
"contributions": [
"code",
"ideas"
]
},
{
"login": "jeffandersen",
"name": "Jeff Andersen",
"avatar_url": "https://avatars.githubusercontent.com/u/474438?v=4",
"profile": "https://github.com/jeffandersen",
"contributions": [
"code"
]
},
{
"login": "natterstefan",
"name": "Stefan Natter",
"avatar_url": "https://avatars.githubusercontent.com/u/1043668?v=4",
"profile": "https://natterstefan.me/",
"contributions": [
"code"
]
},
{
"login": "andersfibiger",
"name": "andersfibiger",
"avatar_url": "https://avatars.githubusercontent.com/u/23510285?v=4",
"profile": "https://github.com/andersfibiger",
"contributions": [
"code"
]
},
{
"login": "thecashewtrader",
"name": "The Cashew Trader",
"avatar_url": "https://avatars.githubusercontent.com/u/81344401?v=4",
"profile": "https://github.com/thecashewtrader",
"contributions": [
"doc"
]
}
],
"contributorsPerLine": 7
}
23 changes: 23 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
/**
* @type {import('eslint').ESLint.Options}
*/
module.exports = {
env: {
commonjs: true,
browser: true,
es6: true,
},
extends: ['eslint-config-ns-ts-base'],
rules: {
'comma-style': 'warn',
'comma-dangle': 'off',
'no-param-reassign': 'off',
'func-names': 'off',
'jest/prefer-strict-equal': 'off',
'jest/prefer-expect-assertions': 'off',
'jest/require-top-level-describe': 'off',
'jest/no-hooks': 'off',
'jest/no-conditional-expect': 'off',
'@typescript-eslint/no-this-alias': ['error', { allowedNames: ['self'] }],
},
};
28 changes: 0 additions & 28 deletions .eslintrc.json

This file was deleted.

117 changes: 114 additions & 3 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,115 @@
dist
node_modules
coverage
# Demo
stats.html

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env*.local

# parcel-bundler cache (https://parceljs.org/)
.cache

# Next.js build output
.next

# Vercel
.vercel

# typescript
*.tsbuildinfo

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and *not* Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

# Rollup
.rollup.cache
3 changes: 0 additions & 3 deletions .prettierignore

This file was deleted.

Empty file removed .vscode/settings.json
Empty file.
11 changes: 0 additions & 11 deletions .vscode/workspace.code-workspace

This file was deleted.

58 changes: 41 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,28 +1,25 @@
# hill-chart

[![](./media/screenshot.png)]()
![hill-chart preview](./media/screenshot.png)

[Basecamp's Hill Chart](https://basecamp.com/features/hill-charts) implementation using [D3.js](https://d3js.org/), **Try the [demo](https://nagi1.github.io/hill-chart/)**

<br/>

[![Build Status](https://travis-ci.com/nagi1/hill-chart.svg?branch=master)](https://travis-ci.com/nagi1/hill-chart) [![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/nagi1/hill-chart/badges/quality-score.png?b=master)](https://scrutinizer-ci.com/g/nagi1/hill-chart/?branch=master) [![Code Coverage](https://scrutinizer-ci.com/g/nagi1/hill-chart/badges/coverage.png?b=master)](https://scrutinizer-ci.com/g/nagi1/hill-chart/?branch=master) [![Codacy Badge](https://app.codacy.com/project/badge/Grade/25cb5660479340ecb20f44f3f36dd4ae)](https://www.codacy.com/manual/nagi1/hill-chart?utm_source=github.com&utm_medium=referral&utm_content=nagi1/hill-chart&utm_campaign=Badge_Grade) [![Demo](https://img.shields.io/badge/Demo-Available-success)](https://nagi1.github.io/hill-chart/) [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](#contributing)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

<br/>

## Features

- [x] Implemented in pure ES6/JS using [D3.js](https://d3js.org)
- [x] Customizable
- [x] Tested ([kinda](#d3-testing-problems) 😅)
- [x] Easily wrapped and integrated into other UI frameworks
- [x] Dark mode by [@jeffandersen](https://github.com/jeffandersen)

- [x] TypeScript support [@natterstefan](https://github.com/natterstefan)

## Getting started

### Using a package manager

Install using yarn

```bash
Expand All @@ -36,6 +33,7 @@ npm i hill-chart
```

Import styles

```css
@import 'hill-chart/dist/styles.css';
```
Expand All @@ -51,15 +49,14 @@ Chart styles ~ 1kb
/>
```

#### D3.js + Hill Chart combined bundle ~ 48kb (16kb gzip)
#### D3.js + Hill Chart combined bundle ~ 48kb (16kb gzip)

```html
<script src="https://unpkg.com/hill-chart@latest/dist/hill-chart.umd.js"></script>
```

#### D3.js + Hill Chart separate bundles


Custom D3.js only minified ~ 41kb (14 gizp)

```html
Expand All @@ -75,7 +72,6 @@ Hill Chart only minified ~8kb (2kb gzip)
## Usage

1. make sure to have empty with an id or class `<svg class="hill-chart" />` on your dom

2. define some points

```js
Expand Down Expand Up @@ -164,6 +160,8 @@ const config = {
};
```

Take a look at the current defaults [here](./src/defaults.ts).

---

### Data (Array)
Expand All @@ -173,13 +171,13 @@ You can define as may points as you want as long as the it have these options
```js
data: [
{
id: 'd4f4sd', // (optional) any unique id, if not provided it'll be auto generated for you.
color: 'red', // color of the point it can be named color 'blue', 'red' or hex #000fff, #cccccc
description: 'Late af task', // text next to the point, it's recommended to keep it short
size: 10, // (optional) default size of the point
x: 12.069770990416055, // x coordinates, (optional, defaults to 0) avoid setting it manually
y: 12.069770990416057, // y coordinates, (optional, defaults to 0) avoid setting it manually
link: '/fired.html', // (optional, defaults to '#') if in preview mode point becomes clickable
id: 'd4f4sd', // (optional) any unique id, if not provided it'll be auto generated for you.
color: 'red', // color of the point it can be named color 'blue', 'red' or hex #000fff, #cccccc
description: 'Late af task', // text next to the point, it's recommended to keep it short
size: 10, // (optional) default size of the point
x: 12.069770990416055, // x coordinates, (optional, defaults to 0) avoid setting it manually
y: 12.069770990416057, // y coordinates, (optional, defaults to 0) avoid setting it manually
link: '/fired.html', // (optional, defaults to '#') if in preview mode point becomes clickable
}
],
```
Expand Down Expand Up @@ -252,6 +250,7 @@ data: [
- Fork this repo!
- Install dev dependencies
- Create new branch describes the new feature/bug.
- Start the watch mode (e.g. `npm run start` or `yarn start`)
- Do your thing :)

### Step 3
Expand All @@ -266,7 +265,6 @@ data: [
- [ ] Refactor this nasty [`drag()`](https://github.com/nagi1/hill-chart/blob/master/src/index.js#L94) event handler
- [ ] Add more test. **(depends on `drag()` refactoring)**
- [ ] Add more events, or improve the existence ones
- [ ] Add dev server/watcher
- [ ] Extract to vue components
- [ ] Feature add snow ball effect, add option to increase the point size gradually near the end.
- [ ] Improve the demo
Expand Down Expand Up @@ -300,3 +298,29 @@ Every Step is well documented

Hill chart is an original idea by Basecamp.
While this project aims to replicate the behavior and/or the design of the mentioned idea, it isn't by any means an attempt to reclaim the credit of the idea nor the design.

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
<tbody>
<tr>
<td align="center"><a href="https://github.com/nagi1"><img src="https://avatars.githubusercontent.com/u/16584220?v=4?s=100" width="100px;" alt="Ahmed Nagi"/><br /><sub><b>Ahmed Nagi</b></sub></a><br /><a href="https://github.com/nagi1/hill-chart/commits?author=nagi1" title="Code">💻</a> <a href="#ideas-nagi1" title="Ideas, Planning, & Feedback">🤔</a></td>
<td align="center"><a href="https://github.com/jeffandersen"><img src="https://avatars.githubusercontent.com/u/474438?v=4?s=100" width="100px;" alt="Jeff Andersen"/><br /><sub><b>Jeff Andersen</b></sub></a><br /><a href="https://github.com/nagi1/hill-chart/commits?author=jeffandersen" title="Code">💻</a></td>
<td align="center"><a href="https://natterstefan.me/"><img src="https://avatars.githubusercontent.com/u/1043668?v=4?s=100" width="100px;" alt="Stefan Natter"/><br /><sub><b>Stefan Natter</b></sub></a><br /><a href="https://github.com/nagi1/hill-chart/commits?author=natterstefan" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/andersfibiger"><img src="https://avatars.githubusercontent.com/u/23510285?v=4?s=100" width="100px;" alt="andersfibiger"/><br /><sub><b>andersfibiger</b></sub></a><br /><a href="https://github.com/nagi1/hill-chart/commits?author=andersfibiger" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/thecashewtrader"><img src="https://avatars.githubusercontent.com/u/81344401?v=4?s=100" width="100px;" alt="The Cashew Trader"/><br /><sub><b>The Cashew Trader</b></sub></a><br /><a href="https://github.com/nagi1/hill-chart/commits?author=thecashewtrader" title="Documentation">📖</a></td>
</tr>
</tbody>
</table>

<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
Loading

0 comments on commit 5528281

Please sign in to comment.