chris/chart
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

color palette improved handling

Browse source
This commit is contained in:
Chris Amow 2026-08-11 19:10:12 -05:00
parent 81045e2128
commit 0bca5d3bb7
3 changed files with 20 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
static/app.js
View file

@ -141,6 +141,13 @@ createApp({
'#d96073', '#b07ad6', '#7d67c9', '#4f6fae',
'#9fb0c4', '#746c60', '#2c2924', '#c8992f',
];
const drawingColorNames = {
'#65b7cf': 'Cyan', '#27825c': 'Green', '#45c39b': 'Mint', '#a8c85d': 'Lime',
'#efb643': 'Amber', '#e0a34a': 'Gold', '#d97a3a': 'Orange', '#bd4545': 'Red',
'#d96073': 'Rose', '#b07ad6': 'Purple', '#7d67c9': 'Violet', '#4f6fae': 'Blue',
'#9fb0c4': 'Slate', '#746c60': 'Taupe', '#2c2924': 'Charcoal', '#c8992f': 'Ochre',
};
const drawingColorName = color => drawingColorNames[color] || color;
const now = ref(Date.now());
let chartApi = null;
let socket = null;
@ -777,6 +784,6 @@ createApp({
window.removeEventListener('keydown', handleKeydown);
});
return { status, price, barAge, dataUpdatedAt, timeframe, timeframes, drawingColors, prefs, clusters, events, diagnosticMode, captureBusy, captureDiagnostic, armedTool, drawName, drawColor, drawWidth, drawSide, snap, selectedDrawing, selectedDrawings, manualLines, hasDrawingSelection, allManualSelected, alertPrice, alertNote, levelColor, levelWidth, addPriceAlert, armTool, selectTimeframe, allEnabled, toggleGroup, deleteSelected, deleteLine, focusDrawing, toggleDrawingSelection, toggleSelectAll, deleteSelectedLines, renameLine, updateLineStyle, setArmed, commentText, commentFloat, comments, drawings, filteredDrawings, drawingFilter, drawingKind, deleteDrawing, deleteFilteredDrawings, toggleComment, togglePinned };
return { status, price, barAge, dataUpdatedAt, timeframe, timeframes, drawingColors, drawingColorName, prefs, clusters, events, diagnosticMode, captureBusy, captureDiagnostic, armedTool, drawName, drawColor, drawWidth, drawSide, snap, selectedDrawing, selectedDrawings, manualLines, hasDrawingSelection, allManualSelected, alertPrice, alertNote, levelColor, levelWidth, addPriceAlert, armTool, selectTimeframe, allEnabled, toggleGroup, deleteSelected, deleteLine, focusDrawing, toggleDrawingSelection, toggleSelectAll, deleteSelectedLines, renameLine, updateLineStyle, setArmed, commentText, commentFloat, comments, drawings, filteredDrawings, drawingFilter, drawingKind, deleteDrawing, deleteFilteredDrawings, toggleComment, togglePinned };
},
}).mount('#app');

10
static/index.html
View file

@ -164,12 +164,13 @@
<div class="drawing-controls" @click.stop v-if="item.kind !== 'comment'">
<details class="color-picker">
<summary aria-label="Choose drawing color" title="Choose color"
<summary :aria-label="`Choose drawing color; current color ${drawingColorName(item.line.color || '#65b7cf')}`"
:title="drawingColorName(item.line.color || '#65b7cf')"
:style="{ backgroundColor: item.line.color || '#65b7cf' }"></summary>
<div class="color-popover">
<button v-for="color in drawingColors" :key="color" type="button"
:class="{selected: color === item.line.color}" :style="{backgroundColor: color}"
:aria-label="`Use color ${color}`"
:title="drawingColorName(color)" :aria-label="`Use ${drawingColorName(color)} (${color})`"
@click.stop="updateLineStyle(item.line, {color}); $event.currentTarget.closest('details').open = false"></button>
<label class="custom-color" title="Custom color">
<i class="fa-solid fa-palette"></i>
@ -189,12 +190,13 @@
</div>
<div class="drawing-controls" @click.stop v-else>
<details class="color-picker">
<summary aria-label="Choose comment color" title="Choose color"
<summary :aria-label="`Choose comment color; current color ${drawingColorName(item.comment.color || '#c8992f')}`"
:title="drawingColorName(item.comment.color || '#c8992f')"
:style="{ backgroundColor: item.comment.color || '#c8992f' }"></summary>
<div class="color-popover">
<button v-for="color in drawingColors" :key="color" type="button"
:class="{selected: color === item.comment.color}" :style="{backgroundColor: color}"
:aria-label="`Use color ${color}`"
:title="drawingColorName(color)" :aria-label="`Use ${drawingColorName(color)} (${color})`"
@click.stop="updateLineStyle(item.comment, {color}); $event.currentTarget.closest('details').open = false"></button>
<label class="custom-color" title="Custom color">
<i class="fa-solid fa-palette"></i>

8
tests/e2e/drawings.test.mjs
View file

@ -40,6 +40,8 @@ test('editing a drawing name with Backspace or Delete cannot delete the drawing'
assert.ok(rowBox.height <= 48, `drawing row is still ${rowBox.height}px tall`);
assert.equal(await row.locator('.drawing-state .fa-bell').count(), 1,
'the armed state is not represented by a bell');
assert.equal(await row.locator('.color-picker>summary').getAttribute('title'), 'Cyan',
'the current-color swatch does not name its color');
const checkbox = row.locator('.line-select');
if (await checkbox.isChecked()) await checkbox.click();
await row.locator('.drawing-secondary>span').click();
@ -47,8 +49,10 @@ test('editing a drawing name with Backspace or Delete cannot delete the drawing'
assert.equal(await page.locator('.chart-line-focus').isVisible(), true,
'selecting the drawing did not point out its trendline on the chart');
await row.locator('.color-picker>summary').click();
assert.equal(await row.locator('.color-popover>button[aria-label^="Use color"]').count(), 16,
assert.equal(await row.locator('.color-popover>button[aria-label^="Use "]').count(), 16,
'the preset palette does not contain 16 colors');
assert.equal(await row.locator('.color-popover>button[title="Cyan"]').count(), 1,
'palette colors do not expose readable names');
assert.equal(await row.locator('.custom-color input[type="color"]').count(), 1,
'the custom color choice is missing');
assert.equal(await row.locator('.palette-close').count(), 1,
@ -61,7 +65,7 @@ test('editing a drawing name with Backspace or Delete cannot delete the drawing'
assert.equal(await row.locator('.color-popover').isVisible(), false,
'the close control did not close the color palette');
await row.locator('.color-picker>summary').click();
await row.locator('button[aria-label="Use color #bd4545"]').click();
await row.locator('button[aria-label="Use Red (#bd4545)"]').click();
await page.waitForFunction(([id, color]) =>
window.__chart.levels.find(level => level.id === id)?.color === color,
[created, '#bd4545']);