Skip to content

Commit ebca402

Browse files
nicksimpkinsnicksimpkins
authored
Merge pull request #76 from VisionKernel/dev
Update to 2.0.1
2 parents 623cc71 + 240e520 commit ebca402

File tree

12 files changed

+1249
-357
lines changed

12 files changed

+1249
-357
lines changed

‎README.md‎

Lines changed: 8 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
> A modern, high-performance JavaScript charting library optimized for financial and economic data visualization.
44
5-
[![Version](https://img.shields.io/badge/version-2.0.0-blue.svg)](https://github.com/visionkernel/visioncharts)
5+
[![Version](https://img.shields.io/badge/version-2.0.1-blue.svg)](https://github.com/visionkernel/visioncharts)
66
[![License](https://img.shields.io/badge/license-MIT-green.svg)](LICENSE)
77

88

@@ -414,7 +414,7 @@ const processedData = chart.dataProcessor.processData(rawData, {
414414
```
415415
visioncharts/
416416
├── src/
417-
│ ├── core/ # Core chart classes
417+
│ ├── core/ # Core chart classes
418418
│ │ ├── Chart.js # Base chart class
419419
│ │ ├── Axis.js # Axis rendering
420420
│ │ └── Scale.js # Scale management
@@ -433,18 +433,17 @@ visioncharts/
433433
│ │ ├── PathGenerator.js # Path generation
434434
│ │ └── BrowserSupport.js# Browser detection
435435
│ └── index.js # Main export
436-
├── examples/ # Demo and examples
437-
│ ├── index.html # Interactive demo
438-
│ ├── scripts/ # Demo scripts
439-
│ └── styles/ # Demo styles
440-
├── dist/ # Built files
441-
└── docs/ # Documentation
436+
└── examples/ # Demo and examples
437+
├── index.html # Interactive demo
438+
├── scripts/ # Demo script
439+
├── styles/ # Demo page style
440+
└── data/ # Sample JSON data
442441
```
443442

444443
### Building from Source
445444
```bash
446445
# Clone the repository
447-
git clone https://github.com/your-username/visioncharts.git
446+
git clone https://github.com/visionkernel/visioncharts.git
448447
cd visioncharts
449448

450449
# Install dependencies
@@ -456,24 +455,8 @@ npm run build
456455
# Run development server
457456
npm run dev
458457

459-
# Run tests
460-
npm test
461-
462-
# Generate documentation
463-
npm run docs
464458
```
465459

466-
## 📈 Examples
467-
468-
### Financial Dashboard
469-
See the complete example in [`examples/financial-dashboard.html`](examples/financial-dashboard.html)
470-
471-
### Multi-Panel Analysis
472-
See the complete example in [`examples/multi-panel.html`](examples/multi-panel.html)
473-
474-
### Real-time Data
475-
See the complete example in [`examples/realtime-data.html`](examples/realtime-data.html)
476-
477460
## 🤝 Community & Support
478461

479462
- **GitHub Issues**: [Report bugs and request features](https://github.com/visionkernel/visioncharts/issues)

‎examples/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -254,7 +254,7 @@ <h4>Add New Dataset</h4>
254254
</main>
255255

256256
<footer>
257-
<p>VisionCharts v2.0.0 | MIT License | &copy; 2025 VisionKernel Team</p>
257+
<p>VisionCharts v2.0.1 | MIT License | &copy; 2025 VisionKernel Team</p>
258258
</footer>
259259

260260
<script type="module" src="scripts/script.js"></script>

‎examples/scripts/script.js‎

Lines changed: 20 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -494,26 +494,20 @@ function setupLineChartControls() {
494494
if (legendToggle) {
495495
// Initialize button state - legend starts visible
496496
legendToggle.classList.add('active');
497-
let legendVisible = true; // Track state manually
498497

499498
legendToggle.addEventListener('click', () => {
500499
try {
501-
if (lineChart.legend) {
502-
// Toggle the state
503-
legendVisible = !legendVisible;
504-
505-
// Apply the new state
506-
lineChart.legend.setVisible(legendVisible);
507-
508-
console.log('Legend toggle - new state:', legendVisible);
509-
510-
// Update button appearance
511-
legendToggle.classList.toggle('active', legendVisible);
512-
513-
console.log('Legend button classes after toggle:', legendToggle.className);
514-
}
500+
// Use the unified toggle method that works in both modes
501+
const newState = lineChart.toggleLegend();
502+
503+
console.log(`Line chart legend toggle - new state: ${newState}`);
504+
console.log(`Chart is in ${lineChart.isPanelMode ? 'panel' : 'single'} mode`);
505+
506+
// Update button appearance based on actual state
507+
legendToggle.classList.toggle('active', newState);
508+
515509
} catch (error) {
516-
console.error('Error toggling legend:', error);
510+
console.error('Error toggling line chart legend:', error);
517511
}
518512
});
519513
}
@@ -742,26 +736,20 @@ function setupBarChartControls() {
742736
if (legendToggle) {
743737
// Initialize button state - legend starts visible
744738
legendToggle.classList.add('active');
745-
let legendVisible = true; // Track state manually
746739

747740
legendToggle.addEventListener('click', () => {
748741
try {
749-
if (barChart.legend) {
750-
// Toggle the state
751-
legendVisible = !legendVisible;
752-
753-
// Apply the new state
754-
barChart.legend.setVisible(legendVisible);
755-
756-
console.log('Bar legend toggle - new state:', legendVisible);
757-
758-
// Update button appearance
759-
legendToggle.classList.toggle('active', legendVisible);
760-
761-
console.log('Bar legend button classes after toggle:', legendToggle.className);
762-
}
742+
// Use the unified toggle method that works in both modes (same as line chart)
743+
const newState = barChart.toggleLegend();
744+
745+
console.log(`Bar chart legend toggle - new state: ${newState}`);
746+
console.log(`Chart is in ${barChart.isPanelMode ? 'panel' : 'single'} mode`);
747+
748+
// Update button appearance based on actual state
749+
legendToggle.classList.toggle('active', newState);
750+
763751
} catch (error) {
764-
console.error('Error toggling bar legend:', error);
752+
console.error('Error toggling bar chart legend:', error);
765753
}
766754
});
767755
}

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "visioncharts",
3-
"version": "2.0.0",
3+
"version": "2.0.1",
44
"description": "A modern, high-performance JavaScript charting library optimized for financial and economic data visualization",
55
"type": "module",
66
"main": "dist/visioncharts.js",

‎src/components/CrosshairTooltip.js‎

Lines changed: 98 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ export class CrosshairTooltip {
132132
}
133133

134134
/**
135-
* Update tooltip content with data points
135+
* Update tooltip content with data points (enhanced for studies)
136136
* @private
137137
*/
138138
_updateContent(dataPoints) {
@@ -142,6 +142,10 @@ export class CrosshairTooltip {
142142
const timestamp = dataPoints[0].dataX;
143143
const formattedDate = this._formatDate(timestamp);
144144

145+
// Separate regular datasets from studies
146+
const regularPoints = dataPoints.filter(point => !point.isStudy);
147+
const studyPoints = dataPoints.filter(point => point.isStudy);
148+
145149
// Build HTML content
146150
let html = `
147151
<div style="
@@ -156,40 +160,107 @@ export class CrosshairTooltip {
156160
</div>
157161
`;
158162

159-
// Add dataset values
160-
dataPoints.forEach((point, index) => {
161-
const datasetName = point.dataset.name || point.datasetId || `Dataset ${index + 1}`;
162-
const value = point.dataY;
163-
const color = point.color || point.dataset.color || '#666';
164-
const formattedValue = this._formatValue(value);
165-
163+
// Add regular dataset values first
164+
if (regularPoints.length > 0) {
165+
regularPoints.forEach((point, index) => {
166+
const datasetName = point.dataset.name || point.datasetId || `Dataset ${index + 1}`;
167+
const value = point.dataY;
168+
const color = point.color || point.dataset.color || '#666';
169+
const formattedValue = this._formatValue(value);
170+
171+
html += `
172+
<div style="
173+
display: flex;
174+
align-items: center;
175+
margin-bottom: 4px;
176+
">
177+
<div style="
178+
width: 10px;
179+
height: 10px;
180+
background-color: ${color};
181+
border-radius: 2px;
182+
margin-right: 8px;
183+
flex-shrink: 0;
184+
"></div>
185+
<div style="
186+
display: flex;
187+
justify-content: space-between;
188+
width: 100%;
189+
min-width: 120px;
190+
">
191+
<span style="margin-right: 12px; color: #ccc;">${datasetName}:</span>
192+
<span style="font-weight: 500;">${formattedValue}</span>
193+
</div>
194+
</div>
195+
`;
196+
});
197+
}
198+
199+
// Add separator and studies section if there are studies
200+
if (studyPoints.length > 0) {
201+
// Add separator line
166202
html += `
167203
<div style="
168-
display: flex;
169-
align-items: center;
170-
margin-bottom: 4px;
171-
${index === dataPoints.length - 1 ? 'margin-bottom: 0;' : ''}
204+
border-top: 1px solid ${this.config.borderColor};
205+
margin: 8px 0 6px 0;
206+
padding-top: 6px;
172207
">
173208
<div style="
174-
width: 10px;
175-
height: 10px;
176-
background-color: ${color};
177-
border-radius: 2px;
178-
margin-right: 8px;
179-
flex-shrink: 0;
180-
"></div>
181-
<div style="
182-
display: flex;
183-
justify-content: space-between;
184-
width: 100%;
185-
min-width: 120px;
209+
font-size: ${this.config.fontSize - 1}px;
210+
color: #999;
211+
margin-bottom: 4px;
212+
font-weight: 500;
186213
">
187-
<span style="margin-right: 12px; color: #ccc;">${datasetName}:</span>
188-
<span style="font-weight: 500;">${formattedValue}</span>
214+
Technical Indicators:
189215
</div>
190216
</div>
191217
`;
192-
});
218+
219+
// Add study values with slightly different styling
220+
studyPoints.forEach((point, index) => {
221+
const studyName = point.dataset.name || `Study ${index + 1}`;
222+
const value = point.dataY;
223+
const color = point.color || point.dataset.color || '#666';
224+
const formattedValue = this._formatValue(value);
225+
226+
html += `
227+
<div style="
228+
display: flex;
229+
align-items: center;
230+
margin-bottom: 3px;
231+
padding-left: 8px;
232+
">
233+
<div style="
234+
width: 8px;
235+
height: 8px;
236+
background-color: ${color};
237+
border-radius: 1px;
238+
margin-right: 8px;
239+
flex-shrink: 0;
240+
opacity: 0.8;
241+
"></div>
242+
<div style="
243+
display: flex;
244+
justify-content: space-between;
245+
width: 100%;
246+
min-width: 120px;
247+
">
248+
<span style="
249+
margin-right: 12px;
250+
color: #aaa;
251+
font-size: ${this.config.fontSize - 1}px;
252+
font-style: italic;
253+
">${studyName}:</span>
254+
<span style="
255+
font-weight: 400;
256+
font-size: ${this.config.fontSize - 1}px;
257+
color: ${color};
258+
">${formattedValue}</span>
259+
</div>
260+
</div>
261+
`;
262+
});
263+
}
193264

194265
this.element.innerHTML = html;
195266
}

0 commit comments

Comments
 (0)