Patternomaly

Easily generate patterns for use in data graphics.

But why?

Color-blindness, that's why.

This library came about as part of an issue in Chart.js.

Usage

pnpm install @smarthr/patternomaly

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

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

# メインの依存関係を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

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.

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

Thanks to obedm503 for generating the example pattern image.

Development

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

To run the examples locally:

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.

See the pattern option example page 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"].