Skip to content

Commit 98638e2

Browse files
chmelevskijchmelevskij
authored
feat: use latest d3 version from npm (#3272)
1 parent cc93eb5 commit 98638e2

File tree

9 files changed

+344
-65
lines changed

9 files changed

+344
-65
lines changed

‎.eslintrc.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ module.exports = {
2424
'no-duplicate-imports': 'error',
2525
},
2626
globals: {
27-
d3: true,
2827
cordova: true,
2928
cordovaUI: true,
3029
ol: true,

‎libraries/d3.min.js‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
"bluebird": "^3.7.2",
5757
"bonjour": "^3.5.0",
5858
"crypto-es": "^1.2.7",
59+
"d3": "^7.8.2",
5960
"djv": "^2.1.4",
6061
"dompurify": "^2.4.0",
6162
"i18next": "^19.0.0",

‎src/js/main.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { isExpertModeEnabled } from './utils/isExportModeEnabled.js';
1818
import { updateTabList } from './utils/updateTabList.js';
1919
import { checkForConfiguratorUpdates } from './utils/checkForConfiguratorUpdates.js';
2020
import * as THREE from 'three';
21+
import * as d3 from 'd3';
2122

2223
$(document).ready(function () {
2324

‎src/js/tabs/motors.js‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { gui_log } from "../gui_log";
1919
import { updateTabList } from "../utils/updateTabList";
2020
import { isInt, getMixerImageSrc } from "../utils/common";
2121
import semver from 'semver';
22+
import * as d3 from 'd3';
2223

2324
const motors = {
2425
previousDshotBidir: null,
@@ -159,43 +160,41 @@ motors.initialize = async function (callback) {
159160
function initGraphHelpers(selector, sampleNumber, heightDomain) {
160161
const helpers = {selector: selector, targetElement: $(selector), dynamicHeightDomain: !heightDomain};
161162

162-
helpers.widthScale = d3.scale.linear()
163+
helpers.widthScale = d3.scaleLinear()
163164
.clamp(true)
164165
.domain([(sampleNumber - 299), sampleNumber]);
165166

166-
helpers.heightScale = d3.scale.linear()
167+
helpers.heightScale = d3.scaleLinear()
167168
.clamp(true)
168169
.domain(heightDomain || [1, -1]);
169170

170-
helpers.xGrid = d3.svg.axis();
171-
helpers.yGrid = d3.svg.axis();
171+
helpers.xGrid = d3.axisBottom();
172+
helpers.yGrid = d3.axisLeft();
172173

173174
updateGraphHelperSize(helpers);
174175

175176
helpers.xGrid
176177
.scale(helpers.widthScale)
177-
.orient("bottom")
178-
.ticks(5)
178+
.tickSize(-helpers.height)
179+
.tickValues(helpers.widthScale.ticks(5).concat(helpers.widthScale.domain()))
179180
.tickFormat("");
180181

181182
helpers.yGrid
182183
.scale(helpers.heightScale)
183-
.orient("left")
184-
.ticks(5)
184+
.tickSize(-helpers.width)
185+
.tickValues(helpers.heightScale.ticks(5).concat(helpers.heightScale.domain()))
185186
.tickFormat("");
186-
helpers.xAxis = d3.svg.axis()
187+
helpers.xAxis = d3.axisBottom()
187188
.scale(helpers.widthScale)
188189
.ticks(5)
189-
.orient("bottom")
190190
.tickFormat(function (d) {return d;});
191191

192-
helpers.yAxis = d3.svg.axis()
192+
helpers.yAxis = d3.axisLeft()
193193
.scale(helpers.heightScale)
194194
.ticks(5)
195-
.orient("left")
196195
.tickFormat(function (d) {return d;});
197196

198-
helpers.line = d3.svg.line()
197+
helpers.line = d3.line()
199198
.x(function (d) { return helpers.widthScale(d[0]); })
200199
.y(function (d) { return helpers.heightScale(d[1]); });
201200

‎src/js/tabs/receiver.js‎

Lines changed: 49 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { degToRad } from "../utils/common";
1818
import semver from 'semver';
1919
import { updateTabList } from "../utils/updateTabList";
2020
import * as THREE from 'three';
21+
import * as d3 from "d3";
2122

2223
import CryptoES from 'crypto-es';
2324

@@ -716,12 +717,17 @@ receiver.initialize = function (callback) {
716717
}
717718

718719
function update_ui() {
719-
720720
if (FC.RC.active_channels > 0) {
721-
722721
// update bars with latest data
723722
for (let i = 0; i < FC.RC.active_channels; i++) {
724-
meterFillArray[i].css('width', `${((FC.RC.channels[i] - meterScale.min) / (meterScale.max - meterScale.min) * 100).clamp(0, 100)}%`);
723+
meterFillArray[i].css(
724+
"width",
725+
`${(
726+
((FC.RC.channels[i] - meterScale.min) /
727+
(meterScale.max - meterScale.min)) *
728+
100
729+
).clamp(0, 100)}%`,
730+
);
725731
meterLabelArray[i].text(FC.RC.channels[i]);
726732
}
727733

@@ -741,53 +747,63 @@ receiver.initialize = function (callback) {
741747
rxPlotData[i].shift();
742748
}
743749
}
744-
745750
}
746751

747752
// update required parts of the plot
748-
widthScale = d3.scale.linear().
749-
domain([(samples - 299), samples]);
753+
widthScale = d3.scaleLinear().domain([samples - 299, samples]);
750754

751-
heightScale = d3.scale.linear().
752-
domain([800, 2200]);
755+
heightScale = d3.scaleLinear().domain([800, 2200]);
753756

754757
update_receiver_plot_size();
755758

756-
const xGrid = d3.svg.axis().
757-
scale(widthScale).
758-
orient("bottom").
759-
tickSize(-height, 0, 0).
760-
tickFormat("");
761-
762-
const yGrid = d3.svg.axis().
763-
scale(heightScale).
764-
orient("left").
765-
tickSize(-width, 0, 0).
766-
tickFormat("");
767-
768-
const xAxis = d3.svg.axis().
769-
scale(widthScale).
770-
orient("bottom").
771-
tickFormat(function (d) {return d;});
759+
const xGrid = d3
760+
.axisBottom()
761+
.scale(widthScale)
762+
.tickSize(-height)
763+
.tickFormat("");
764+
765+
const yGrid = d3
766+
.axisLeft()
767+
.scale(heightScale)
768+
.tickSize(-width)
769+
.tickFormat("");
770+
771+
const xAxis = d3
772+
.axisBottom()
773+
.scale(widthScale)
774+
.tickFormat(function (d) {
775+
return d;
776+
});
772777

773-
const yAxis = d3.svg.axis().
774-
scale(heightScale).
775-
orient("left").
776-
tickFormat(function (d) {return d;});
778+
const yAxis = d3
779+
.axisLeft()
780+
.scale(heightScale)
781+
.tickFormat(function (d) {
782+
return d;
783+
});
777784

778-
const line = d3.svg.line().
779-
x(function (d) {return widthScale(d[0]);}).
780-
y(function (d) {return heightScale(d[1]);});
785+
const line = d3
786+
.line()
787+
.x(function (d) {
788+
return widthScale(d[0]);
789+
})
790+
.y(function (d) {
791+
return heightScale(d[1]);
792+
});
781793

782794
svg.select(".x.grid").call(xGrid);
783795
svg.select(".y.grid").call(yGrid);
784796
svg.select(".x.axis").call(xAxis);
785797
svg.select(".y.axis").call(yAxis);
786798

787799
const data = svg.select("g.data");
788-
const lines = data.selectAll("path").data(rxPlotData, function (d, i) {return i;});
800+
const lines = data
801+
.selectAll("path")
802+
.data(rxPlotData, function (d, i) {
803+
return i;
804+
});
789805
lines.enter().append("path").attr("class", "line");
790-
lines.attr('d', line);
806+
lines.attr("d", line);
791807

792808
samples++;
793809
}

‎src/js/tabs/sensors.js‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import FC from "../fc";
66
import MSP from "../msp";
77
import MSPCodes from "../msp/MSPCodes";
88
import serial from "../serial";
9+
import * as d3 from 'd3';
910

1011
const sensors = {};
1112
sensors.initialize = function (callback) {
@@ -69,48 +70,45 @@ sensors.initialize = function (callback) {
6970
function initGraphHelpers(selector, sampleNumber, heightDomain) {
7071
const helpers = {selector: selector, targetElement: $(selector), dynamicHeightDomain: !heightDomain};
7172

72-
helpers.widthScale = d3.scale.linear()
73+
helpers.widthScale = d3.scaleLinear()
7374
.clamp(true)
7475
.domain([(sampleNumber - 299), sampleNumber]);
7576

76-
helpers.heightScale = d3.scale.linear()
77+
helpers.heightScale = d3.scaleLinear()
7778
.clamp(true)
7879
.domain(heightDomain || [1, -1]);
7980

80-
helpers.xGrid = d3.svg.axis();
81-
helpers.yGrid = d3.svg.axis();
81+
helpers.xGrid = d3.axisBottom();
82+
helpers.yGrid = d3.axisLeft();
8283

8384
updateGraphHelperSize(helpers);
8485

8586
helpers.xGrid
8687
.scale(helpers.widthScale)
87-
.orient("bottom")
8888
.ticks(5)
8989
.tickFormat("");
9090

9191
helpers.yGrid
9292
.scale(helpers.heightScale)
93-
.orient("left")
9493
.ticks(5)
9594
.tickFormat("");
9695

97-
helpers.xAxis = d3.svg.axis()
96+
helpers.xAxis = d3.axisBottom()
9897
.scale(helpers.widthScale)
9998
.ticks(5)
100-
.orient("bottom")
10199
.tickFormat(function (d) {return d;});
102100

103-
helpers.yAxis = d3.svg.axis()
101+
helpers.yAxis = d3.axisLeft()
104102
.scale(helpers.heightScale)
105103
.ticks(5)
106-
.orient("left")
107104
.tickFormat(function (d) {return d;});
108105

109-
helpers.line = d3.svg.line()
106+
helpers.line = d3.line()
110107
.x(function (d) {return helpers.widthScale(d[0]);})
111108
.y(function (d) {return helpers.heightScale(d[1]);});
112109

113110
return helpers;
111+
114112
}
115113

116114
function drawGraph(graphHelpers, data, sampleNumber) {

‎src/main.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,6 @@
5959
<!-- CORDOVA_INCLUDE js/cordova_startup.js -->
6060
<script type="text/javascript" src="./node_modules/jquery/dist/jquery.min.js"></script>
6161
<script type="text/javascript" src="./node_modules/jquery-ui-npm/jquery-ui.min.js"></script>
62-
<script type="text/javascript" src="./js/libraries/d3.min.js"></script>
6362
<script type="text/javascript" src="./js/libraries/jquery.nouislider.all.min.js"></script>
6463
<script type="text/javascript" src="./js/libraries/jquery.flightindicators.js"></script>
6564
<script type="text/javascript" src="./node_modules/bluebird/js/browser/bluebird.min.js"></script>

0 commit comments

Comments
 (0)