npm package: @smarthr/patternomaly
Description: Easily generate patterns for use in data graphics
Latest version: 2.0.0

# Patternomaly

Easily generate patterns for use in data graphics.

<img src="./assets/example.png" alt="Pattern example" width="650">

## But why?

[Color-blindness](http://betweentwobrackets.com/data-graphics-and-colour-vision/), that's why.

This library came about as part of [an issue in Chart.js](https://github.com/chartjs/Chart.js/issues/1323).

## Usage

    pnpm install patternomaly

## ⚠️ テスト実行時の注意事項

**背景**: セキュリティ要件によりpnpmの、`minimumReleaseAge`設定のためNodeバージョンを最新に更新しています。しかし、`canvas`パッケージ（テスト用）は何らかの事情により`pnpm install`では内部パッケージのビルドができないため、canvasのみ `npm install` を使用しています：

```bash
# メインの依存関係をpnpmでインストール
pnpm install

# canvasパッケージのみnpmで個別インストール（一時的な回避策）
cd node_modules/canvas
npm install

# テスト実行
pnpm test
```

Generate a single canvas pattern

    pattern.draw('square', '#1f77b4');

Generate an array of canvas patterns

```javascript
pattern.generate([
  '#1f77b4',
  '#ff7f0e',
  '#2ca02c',
  '#d62728'
]);
```

## Available Patterns

There are currently 21 pattern variants available. When using the `generate` method (above) patterns will be 'randomly' assigned.

It is however possible to provide specific patterns using the `draw` method.

```javascript
datasets: [{
  data: [
    300, 50, 100, 210, 140
  ],
  backgroundColor: [
    pattern.draw('square', '#1f77b4'),
    pattern.draw('circle', '#ff7f0e'),
    pattern.draw('diamond', '#2ca02c'),
    pattern.draw('zigzag-horizontal', '#17becf'),
    pattern.draw('triangle', 'rgb(255, 99, 132, 0.4)') // with opacity
  ]
}]
```

### Pattern Keys

- plus
- cross
- dash
- cross-dash
- dot
- dot-dash
- disc
- ring
- line
- line-vertical
- weave
- zigzag
- zigzag-vertical
- diagonal
- diagonal-right-left
- square
- box
- triangle
- triangle-inverted
- diamond
- diamond-box

<img src="./assets/pattern-list.png" alt="Pattern example" width="650">

*Thanks to [obedm503](https://github.com/obedm503) for generating the example pattern image.*

## Development

⚠️ **開発前の注意**: canvasパッケージを個別にインストールしてください（上記のセキュリティ注意事項を参照）。

To run the examples locally:

```bash
pnpm run serve
```

This will:
1. Build the library
2. Copy the built files to the examples directory
3. Start a local server at `http://localhost:3000`

Available examples:
- `chart-types.html` - Chart.js integration examples
- `optional.html` - Pattern toggle functionality
- `patterns.html` - All available patterns display
- `compare.html` - Pattern vs color comparison
- `scaling.html` - Pattern scaling examples
- `single.html` - Single pattern demo

## Providing a Pattern Alternative

In order to provide an alternative view for visually impaired viewers it's a good idea to [provide a patterned alternative](http://betweentwobrackets.com/data-graphics-and-colour-vision/#patternstotherescue).

See the [pattern option example page](examples/optional.html) for a simple implementation of a pattern toggle switch for Chart.js.

## Typescript / Angular
A typings file is included in this package. Just insert `import {draw, generate} from 'patternomaly'` in the header of your .ts file.
Still you have to add the javascript file to your build e.g. in the scripts array in angular.cli.json e.g.   `"scripts": ["node_modules/patternomaly/dist/patternomaly.js"]`.