Skip to content

Commit

Permalink
Chartscii 3.1 (#140)
Browse files Browse the repository at this point in the history 
* feat: add value labels

* fix: upgrade styl3

* fix: readme

* feat: final touches for valueLabels

* chore: upgrading styl3

* fix: snapshots

* docs: updated readme for valueLabels

* fix: refactors
  • Loading branch information
@tool3
tool3 authored Jun 4, 2024
1 parent 5d414ab commit f5c05d2
Show file tree
Hide file tree
Showing 17 changed files with 951 additions and 748 deletions.
88 changes: 47 additions & 41 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,14 +85,18 @@ For maximum flexibility, provide an array of chart points. This will allow you t
### example

```tsx
import Chartscii from 'chartscii';
import Chartscii from "chartscii";

const data = [{ label: 'label', value: 2, color: 'pink' }, { label: 'label', value: 2, color: 'purple' }, { label: 'label', value: 2, color: 'marine' },];
const data = [
{ label: "label", value: 2, color: "pink" },
{ label: "label", value: 2, color: "purple" },
{ label: "label", value: 2, color: "marine" }
];
const chart = new Chartscii(data, { colorLabels: true });
console.log(chart.create());
```
![](./shellfies/chartscii_chartpoint.png)

![](./shellfies/chartscii_chartpoint.png)

# Options

Expand Down Expand Up @@ -132,26 +136,27 @@ const options: ChartOptions = {

## customization options

| name | description | type | default |
| ----------- | ---------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------ |
| percentage | calculate and show percentage data | `boolean` | `false` |
| colorLabels | color labels with provided color per label, or color provided to option | `boolean` | `false` |
| sort | sort the input data | `boolean` | `false` |
| reverse | reverse the input data | `boolean` | `false` |
| naked | don’t print chart structure ascii characters | `boolean` | `false` |
| labels | show labels | `boolean` | `true` |
| color | fallback color or unified char bars color | `string` | `undefined` |
| fill | use this character to fill remaining chart bar space | `string` | `undefined` |
| maxValue | values are scaled proportionate to this value. otherwise the max will be calculated from the provided data. | `number` | `undefined` |
| width | width of chart | `number` | `100` |
| height | height of chart | `number` | `10` |
| padding | padding between bars | `number` | `0` |
| barSize | size of each bar | `number` | `1` |
| title | chart title | `string` | `undefined` |
| char | use this character to draw the chart bars | `string` | `█` |
| orientation | horizontal or vertical | `string` | `horizontal` |
| theme | `styl3`'s [themes](https://github.com/tool3/styl3?tab=readme-ov-file#themes) | `string` | `undefined` |
| structure | use these characters to draw the enclosing chart borders. | `object` | `{ x: '═', y: '╢', bottomLeft: '╚', axis: '║', topLeft: '╔' }` |
| name | description | type | default |
| ----------- | ----------------------------------------------------------------------------------------------------------- | -------------------- | -------------------------------------------------------------- |
| percentage | calculate and show percentage data | `boolean` | `false` |
| colorLabels | color labels with provided color per label, or color provided to option | `boolean` | `false` |
| valueLabels | show values of each bar | `boolean` | `true` |
| sort | sort the input data | `boolean` | `false` |
| reverse | reverse the input data | `boolean` | `false` |
| naked | don’t print chart structure ascii characters | `boolean` | `false` |
| labels | show labels | `boolean` | `true` |
| color | fallback color or unified char bars color | `string` | `undefined` |
| fill | use this character to fill remaining chart bar space | `string` | `undefined` |
| scale | values are scaled proportionate to this value. otherwise the max will be calculated from the provided data. | `number` or `string` | `auto` |
| width | width of chart | `number` | `100` |
| height | height of chart | `number` | `10` |
| padding | padding between bars | `number` | `0` |
| barSize | size of each bar | `number` | `1` |
| title | chart title | `string` | `undefined` |
| char | use this character to draw the chart bars | `string` | `█` |
| orientation | horizontal or vertical | `string` | `horizontal` |
| theme | `styl3`'s [themes](https://github.com/tool3/styl3?tab=readme-ov-file#themes) | `string` | `undefined` |
| structure | use these characters to draw the enclosing chart borders. | `object` | `{ x: '═', y: '╢', bottomLeft: '╚', axis: '║', topLeft: '╔' }` |

## chartscii + styl3 = ❤️

Expand Down Expand Up @@ -187,36 +192,37 @@ const chart = new Chartscii(data, {

console.log(chart.create());
```
![](./shellfies/chartscii_styl3.png)

![](./shellfies/chartscii_styl3.png)

# examples
here are some examples of charts using `styl3`'s formatting on the chart labels.

here are some examples of charts using `styl3`'s formatting on the chart labels.

> [!TIP]
> you can run more examples from the `./examples/` directory of this repository using `ts-node`.
> for example `npx ts-node examples/loaders.ts`
> you can run more examples from the `./examples/` directory of this repository using `ts-node`.
> for example `npx ts-node examples/loaders.ts`
## vertical

| options | chart |
| ---- | ----- |
| beach theme with italic and bold labels with a bar size of 2 | ![](./shellfies/vertical/chartscii_beach_italic_bold_barsize.png) |
| pastel theme with bold and underlined labels with padding of 2 | ![](./shellfies/vertical/chartscii_pastel_bold_underline_padding.png) |
| lush theme with strikedout labels no padding and emoji | ![](./shellfies/vertical/chartscii_lush_strikeout_emoji.png) |
| lush theme with underlined labels no padding and no axis structure char | ![](./shellfies/vertical/chartscii_lush_underline_no_axis_structure.png) |
| standard theme with dimmed and italic labels and padding 1 | ![](./shellfies/vertical/chartscii_standard_dimmed_italic_padding_structure.png) |
| pastel theme with inverted and underlined labels with a dark fill character | ![](./shellfies/vertical/chartscii_pastel_inverted_underline_dark_fill.png) |
| options | chart |
| --------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
| beach theme with italic and bold labels with a bar size of 2 | ![](./shellfies/vertical/chartscii_beach_italic_bold_barsize.png) |
| pastel theme with bold and underlined labels with padding of 2 | ![](./shellfies/vertical/chartscii_pastel_bold_underline_padding.png) |
| lush theme with strikedout labels no padding and emoji | ![](./shellfies/vertical/chartscii_lush_strikeout_emoji.png) |
| lush theme with underlined labels no padding and no axis structure char | ![](./shellfies/vertical/chartscii_lush_underline_no_axis_structure.png) |
| standard theme with dimmed and italic labels and padding 1 | ![](./shellfies/vertical/chartscii_standard_dimmed_italic_padding_structure.png) |
| pastel theme with inverted and underlined labels with a dark fill character | ![](./shellfies/vertical/chartscii_pastel_inverted_underline_dark_fill.png) |

## horizontal

| options | chart |
| ---- | ----- |
| pastel theme with bold labels and percentage | ![](./shellfies/horizontal/chartscii_pastel_bold_percentage.png) |
| lush theme with inverted labels and naked chart | ![](./shellfies/horizontal/chartscii_pastel_lush_invert_naked.png) |
| options | chart |
| --------------------------------------------------------------------- | ------------------------------------------------------------------- |
| pastel theme with bold labels and percentage | ![](./shellfies/horizontal/chartscii_pastel_bold_percentage.png) |
| lush theme with inverted labels and naked chart | ![](./shellfies/horizontal/chartscii_pastel_lush_invert_naked.png) |
| beach theme with underlined labels and different structure characters | ![](./shellfies/horizontal/chartscii_beach_underline_structure.png) |
| pastel theme with padding of 1 and custom char | ![](./shellfies/horizontal/chartscii_pastel_char.png) |
| pastel theme with naked chart - can be used to create loaders | ![](./shellfies/horizontal/chartscii_loaders.png) |
| pastel theme with padding of 1 and custom char | ![](./shellfies/horizontal/chartscii_pastel_char.png) |
| pastel theme with naked chart - can be used to create loaders | ![](./shellfies/horizontal/chartscii_loaders.png) |

# Unicode issues

Expand Down
70 changes: 70 additions & 0 deletions branding/shellfie.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
const shellfie = require('shellfie');
const Chartscii = require('../dist');

let color = '';

const colors = [
'red',
'green',
'yellow',
'blue',
'purple',
'pink',
'cyan',
'orange',
'white',
'marine'
];

// generate random chart data
// const data = [];
const labels = ['c', 'h', 'a', 'r', 't', 's', 'c', 'i', 'i', '3.0'];
// for (let i = 0; i < 3; i++) {
// const color = colors[i];
// const value = Math.floor(Math.random() * 20);
// data.push({ value, color, label: `loading` });
// }

const data = [
{ label: "label", value: 1, color: "pink" },
{ label: "label", value: 2, color: "purple" },
{ label: "label", value: 1.5, color: "marine" },
{ label: "label", value: 3, color: "red" },
{ label: "label", value: 2.5, color: "blue" }
];
const chart = new Chartscii(data, {
// height: 10
// width: 50
// width: 50,
// // padding: 2,
// barSize: 1,
padding: 1,
barSize: 1,
valueLabels: true
// naked: true,
// valueLabels: true,
// fill: '░',
// colorLabels: true,
// theme: 'pastel',
// orientation: 'vertical'
});


(async () => {
try {
const data = chart.create();
console.log(data);
await shellfie(data, {
name: './chartscii_chartpoint',
viewport: {
width: 1024,
height: 300
},
});
} catch (error) {
console.log(error);
}
})();


// termtosvg --still-frames --command 'npx ts-node test.ts'
39 changes: 39 additions & 0 deletions branding/test.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import Chartscii from '../chartscii';



// const data = [
// // { value: 18.32, label: '2007' },
// // { value: 23.23, label: '2008' },
// // { value: 2.43, label: '2009' },
// // { value: 5.21, label: '2010' },
// // { value: 50.97, label: '2011' },
// // { value: 21.05, label: '2012' },
// // { value: 1.01, label: '2014' },
// { value: 183.32, label: '2007' },
// { value: 231.23, label: '2008' },
// { value: 26.43, label: '2009' },
// { value: 50.21, label: '2010' },
// { value: 508.97, label: '2011' },
// { value: 212.05, label: '2012' },
// { value: 10.01, label: '2014' },
// ]
const data = [
{ label: "label", value: 1, color: "pink" },
{ label: "label", value: 2, color: "purple" },
{ label: "label", value: 1.5, color: "marine" }
];

const chart = new Chartscii(data, {
// width: 50,
// // padding: 2,
// barSize: 1,
// naked: true,
// valueLabels: true,
// fill: '░',
// colorLabels: true,
// theme: 'pastel',
// orientation: 'vertical',
});

console.log(chart.create());
45 changes: 0 additions & 45 deletions formatters/formatter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,51 +27,6 @@ abstract class ChartFormatter {
stripStyle(label: string) {
return label.replace(/\x1b\[[0-9;]*m/g, '');
}

unicodeRegex() {
// Unicode character classes
const astralRange = '\\ud800-\\udfff';
const comboMarksRange = '\\u0300-\\u036f';
const comboHalfMarksRange = '\\ufe20-\\ufe2f';
const comboSymbolsRange = '\\u20d0-\\u20ff';
const comboMarksExtendedRange = '\\u1ab0-\\u1aff';
const comboMarksSupplementRange = '\\u1dc0-\\u1dff';
const comboRange = comboMarksRange + comboHalfMarksRange + comboSymbolsRange + comboMarksExtendedRange + comboMarksSupplementRange;
const varRange = '\\ufe0e\\ufe0f';

// Telugu characters
const teluguVowels = '\\u0c05-\\u0c0c\\u0c0e-\\u0c10\\u0c12-\\u0c14\\u0c60-\\u0c61';
const teluguVowelsDiacritic = '\\u0c3e-\\u0c44\\u0c46-\\u0c48\\u0c4a-\\u0c4c\\u0c62-\\u0c63';
const teluguConsonants = '\\u0c15-\\u0c28\\u0c2a-\\u0c39';
const teluguConsonantsRare = '\\u0c58-\\u0c5a';
const teluguModifiers = '\\u0c01-\\u0c03\\u0c4d\\u0c55\\u0c56';
const teluguNumerals = '\\u0c66-\\u0c6f\\u0c78-\\u0c7e';
const teluguSingle = `[${teluguVowels}(?:${teluguConsonants}(?!\\u0c4d))${teluguNumerals}${teluguConsonantsRare}]`;
const teluguDouble = `[${teluguConsonants}${teluguConsonantsRare}][${teluguVowelsDiacritic}]|[${teluguConsonants}${teluguConsonantsRare}][${teluguModifiers}`;
const teluguTriple = `[${teluguConsonants}]\\u0c4d[${teluguConsonants}]`;
const telugu = `(?:${teluguTriple}|${teluguDouble}|${teluguSingle})`;

// Unicode capture groups
const astral = `[${astralRange}]`;
const combo = `[${comboRange}]`;
const fitz = '\\ud83c[\\udffb-\\udfff]';
const modifier = `(?:${combo}|${fitz})`;
const nonAstral = `[^${astralRange}]`;
const regional = '(?:\\ud83c[\\udde6-\\uddff]){2}';
const surrogatePair = '[\\ud800-\\udbff][\\udc00-\\udfff]';
const zeroWidthJoiner = '\\u200d';
const blackFlag = '(?:\\ud83c\\udff4\\udb40\\udc67\\udb40\\udc62\\udb40(?:\\udc65|\\udc73|\\udc77)\\udb40(?:\\udc6e|\\udc63|\\udc6c)\\udb40(?:\\udc67|\\udc74|\\udc73)\\udb40\\udc7f)';

// Unicode regexes
const optModifier = `${modifier}?`;
const optVar = `[${varRange}]?`;
const optJoin = `(?:${zeroWidthJoiner}(?:${[nonAstral, regional, surrogatePair].join('|')})${optVar + optModifier})*`;
const seq = optVar + optModifier + optJoin;
const nonAstralCombo = `${nonAstral}${combo}?`;
const symbol = `(?:${[blackFlag, nonAstralCombo, combo, regional, surrogatePair, astral].join('|')})`;

return new RegExp(`${fitz}(?=${fitz})|${telugu}|${symbol + seq}`, 'g');
}
}

export default ChartFormatter;
Loading

0 comments on commit f5c05d2

Please sign in to comment.