Commit 205e34f3 authored by Léonard Treille's avatar Léonard Treille
Browse files

Remove the occupancy chart type

parent 3b7c26af
......@@ -39,7 +39,6 @@ import { TimePipe, TimeUnitPipe, TimeSchedulePipe } from '@pipes/time.pipe';
import { ChartComponent } from '@components/chart/chart.component';
import { OccupancyDatasetPipe } from '@features/occupancy/occupancy-dataset.pipe';
import { VerticalBarChartType } from '@components/chart/types/vertical-bar.chart-type';
import { OccupancyChartType } from '@components/chart/types/occupancy.chart-type';
import { OccupancyChartDialogComponent } from '@features/occupancy/occupancy-chart-dialog/occupancy-chart-dialog.component';
import { ContributionFirstStepComponent } from './pages/contribution/contribution-first-step/contribution-first-step.component';
import { ContributionSecondStepComponent } from './pages/contribution/contribution-second-step/contribution-second-step.component';
......@@ -107,7 +106,6 @@ import { IdPipe } from './pipes/id.pipe';
providers: [
WINDOW_PROVIDERS,
// ChartTypes
{ provide: 'ChartType', useClass: OccupancyChartType, multi: true },
// { provide: 'ChartType', useClass: ScatterGraphChartType, multi: true },
// { provide: 'ChartType', useClass: LineChartType, multi: true },
{ provide: 'ChartType', useClass: VerticalBarChartType, multi: true },
......
import { Injectable } from '@angular/core';
import * as d3 from 'd3';
import { ChartType, Dataset, ChartContext, Point, ChartPadding } from '../chart.model';
import { BaseChartType } from './BaseChartType';
@Injectable()
export class OccupancyChartType extends BaseChartType implements ChartType {
protected radius = 2;
protected staggerTime = 100;
get type(): string {
return 'occupancy';
}
getXScale(dataset: Dataset, context: ChartContext): d3.Scale {
const startDate = new Date();
startDate.setHours(0);
startDate.setMinutes(0);
const endDate = new Date();
endDate.setHours(23);
endDate.setMinutes(59);
return d3.scaleTime()
.domain([startDate, endDate])
.range([this.getPadding(ChartPadding.LEFT, dataset) * 2, context.width - this.getPadding(ChartPadding.RIGHT, dataset) * 2]);
}
getXAxis(dataset: Dataset, scaleX: d3.Scale) {
const axis = super.getXAxis(dataset, scaleX);
axis.tickFormat(d3.timeFormat('%H:%M'));
return axis;
}
getYScale(dataset: Dataset, context: ChartContext): d3.Scale {
return d3.scaleLinear()
.domain([0, d3.max(this.getYDomain(dataset))])
.range([context.height - (this.getPadding(ChartPadding.BOTTOM, dataset) * 2), this.getPadding(ChartPadding.TOP, dataset) * 2]);
}
udpate(dataset: Dataset, context: ChartContext): void {
const scaleX = this.getXScale(dataset, context);
const scaleY = this.getYScale(dataset, context);
// Create axis:
this.buildAxis(dataset, context, this.getXAxis(dataset, scaleX), this.getYAxis(dataset, scaleY));
const x = (p: Point, index: number) => {
const [start, end] = this.getPointDates(p);
return scaleX(start);
};
// Create bars:
dataset.points.forEach((points: Point[], i: number) => {
const barsSelection = context.chart.selectAll(`.${this.type}-${i}`).data(points);
barsSelection
.transition(this.transitionDuration * 4)
.attr('d', (p: Point) => {
const height = context.height - scaleY(p.y) - this.getPadding(ChartPadding.BOTTOM, dataset) * 2;
return this.topRoundedColumn(x(p, i), scaleY(p.y), height, this.getBarWidth(p, scaleX));
});
barsSelection.enter()
.append('path')
.attr('class', `${this.type} ${this.type}-${i}`)
.attr('d', (p: Point) => {
return this.topRoundedColumn(x(p, i), context.height - this.getPadding(ChartPadding.BOTTOM, dataset) * 2, 0, this.getBarWidth(p, scaleX));
})
.style('opacity', 0)
.transition(this.transitionDuration * 4)
// .delay((point: Point, index: number) => index * this.staggerTime)
.style('opacity', 0.9)
.attr('d', (p: Point) => {
const height = context.height - scaleY(p.y) - this.getPadding(ChartPadding.BOTTOM, dataset) * 2;
return this.topRoundedColumn(x(p, i), scaleY(p.y), height, this.getBarWidth(p, scaleX));
});
barsSelection.exit()
.transition(this.transitionDuration * 4)
.style('opacity', 0)
.attr('d', (p: Point) => {
return this.topRoundedColumn(x(p, i), context.height - this.getPadding(ChartPadding.BOTTOM, dataset) * 2, 0, this.getBarWidth(p, scaleX));
})
.remove();
});
}
destroy(context: ChartContext): void {
context.chart.selectAll(`.${this.type}`)
.transition(this.transitionDuration)
.attr('r', 0)
.remove();
}
private topRoundedColumn(x: number, y: number, height: number, width: number) {
const path = d3.path();
path.moveTo(x, y + height);
path.lineTo(x, y + this.radius);
path.quadraticCurveTo(x, y, x + this.radius, y);
path.lineTo(x + width - this.radius, y);
path.quadraticCurveTo(x + width, y, x + width, y + this.radius);
path.lineTo(x + width, y + height);
path.closePath();
return path;
}
private getPointDates(point: Point) {
const [start, end] = (point.x as string).split('--');
const [startHours, startMinutes] = start.split(':');
const [endHours, endMinutes] = end.split(':');
const startDate = new Date();
startDate.setHours(parseInt(startHours, 16));
startDate.setMinutes(parseInt(startMinutes, 16));
const endDate = new Date();
endDate.setHours(parseInt(endHours, 16));
endDate.setMinutes(parseInt(endMinutes, 16));
return [startDate, endDate];
}
private getBarWidth(point: Point, scaleX: any) {
const [start, end] = this.getPointDates(point);
const x1 = scaleX(start);
const x2 = scaleX(end);
return x1 - x2;
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment