This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-bar-racing.git
The following commit(s) were added to refs/heads/master by this push:
new 0eaff8c feat: use mocked faq
0eaff8c is described below
commit 0eaff8ca51c914c575c29e88fb92b8d7eb82e6ca
Author: Ovilia <zwl.s...@gmail.com>
AuthorDate: Mon Feb 21 16:00:15 2022 +0800
feat: use mocked faq
---
_body.html | 1 +
index.html | 1 +
src/components/BBody.vue | 13 +++++++++++--
src/components/BChart.vue | 8 +++++---
src/components/BTable.vue | 4 ++--
src/helper/timeline.ts | 33 ++++++++++-----------------------
6 files changed, 30 insertions(+), 30 deletions(-)
diff --git a/_body.html b/_body.html
index b207dca..6c1dd8c 100644
--- a/_body.html
+++ b/_body.html
@@ -4,4 +4,5 @@
<script
src="https://cdn.jsdelivr.net/npm/handsontable@6.2.2/dist/handsontable.min.js";></script>
+<script async defer src="https://buttons.github.io/buttons.js";></script>
<script type="module" src="./src/main.ts"></script>
diff --git a/index.html b/index.html
index 118b727..8b8b543 100644
--- a/index.html
+++ b/index.html
@@ -73,6 +73,7 @@
})();
</script>
<script
src="https://cdn.jsdelivr.net/npm/handsontable@6.2.2/dist/handsontable.min.js";></script>
+ <script async defer
src="https://buttons.github.io/buttons.js";></script>
<script type="module" src="./src/main.ts"></script>
</body>
</html>
diff --git a/src/components/BBody.vue b/src/components/BBody.vue
index 6b69e45..96ef07e 100644
--- a/src/components/BBody.vue
+++ b/src/components/BBody.vue
@@ -4,10 +4,15 @@
<el-card class="box-card col-span-3 scroll-card">
<h1 slot="header" class="clearfix text-xl">
{{$t('toolName')}}
+ <span id="github-button">
+ <a class="github-button"
href="https://github.com/apache/echarts-bar-racing"; data-size="large"
data-show-count="true" aria-label="Star apache/echarts-bar-racing on
GitHub">Star</a>
+ </span>
</h1>
<div id="el-config" class="align-middle">
<el-form ref="form" :disabled="isExportingVideo">
- <h2>{{$t('chartConfigs')}}</h2>
+ <h2>
+ {{$t('chartConfigs')}}
+ </h2>
<el-row>
<el-select v-model="selectedDemo"
@change="onTitleChanged($event)"
@@ -326,6 +331,10 @@ export default defineComponent({
</script>
<style scoped>
+#github-button {
+ float: right;
+}
+
.scroll-card {
overflow-y: auto;
}
@@ -337,7 +346,7 @@ export default defineComponent({
h1 {
margin-bottom: 15px;
font-weight: bold;
- font-size: 1.5rem;
+ font-size: 1.75rem;
}
h2 {
diff --git a/src/components/BChart.vue b/src/components/BChart.vue
index 5f683fd..61b5235 100644
--- a/src/components/BChart.vue
+++ b/src/components/BChart.vue
@@ -72,11 +72,12 @@ export default defineComponent({
},
captureVideo(width: number, height: number, fps: number):
Promise<boolean> {
+ timeline.setFixedFrameRate(fps);
timeline.startMock();
return new Promise(resolve => {
try {
this.isExportingVideo = true;
- this.doResetChart(width, height);
+ this.doResetChart(width, height, 1);
const container = chart.getDom();
const canvas = container.children[0].children[0] as
HTMLCanvasElement;
if (container.clientHeight) {
@@ -123,7 +124,7 @@ export default defineComponent({
});
},
- doResetChart(width?: number, height?: number) {
+ doResetChart(width?: number, height?: number, dpr?: number) {
this.clearTimeoutHandlers();
if (chart) {
chart.dispose();
@@ -132,7 +133,8 @@ export default defineComponent({
chart = echarts.init(this.$refs.chart as HTMLElement, null, {
width: width || undefined,
- height: height || undefined
+ height: height || undefined,
+ devicePixelRatio: dpr
});
if (!this.chartData || this.chartData.length < headerLength) {
diff --git a/src/components/BTable.vue b/src/components/BTable.vue
index 9361d3c..6ac7a54 100644
--- a/src/components/BTable.vue
+++ b/src/components/BTable.vue
@@ -10,7 +10,7 @@
<script lang='ts'>
import {defineComponent} from 'vue';
-import * as _ from 'lodash';
+import {debounce} from 'lodash';
import Color from 'color';
declare const Handsontable;
@@ -52,7 +52,7 @@ export default defineComponent({
mounted() {
this.reset();
- debouncedTableChange = _.debounce(() => {
+ debouncedTableChange = debounce(() => {
this.$emit('afterChange', this.getChartData());
}, 500);
diff --git a/src/helper/timeline.ts b/src/helper/timeline.ts
index fbf3feb..0f7ac0e 100644
--- a/src/helper/timeline.ts
+++ b/src/helper/timeline.ts
@@ -17,7 +17,7 @@
* under the License.
*/
-declare const window, __VRT_PLAYBACK_SPEED__, __VRT_LOG_ERRORS__,
__VRT_TIMELINE_PAUSED__;
+declare const window, __VRT_PLAYBACK_SPEED__, __VRT_LOG_ERRORS__;
let mockedRaf = null;
let mockedTimeout = null;
@@ -37,12 +37,10 @@ const nativeClearTimeout = window.clearTimeout;
const nativeClearInterval = window.clearInterval;
const nativeDate = window.Date;
-const FIXED_FRAME_TIME = 16;
+let fixedFrameTime = 16;
const MAX_FRAME_TIME = 80;
const TIMELINE_START = 1566458693300;
-window.__VRT_TIMELINE_PAUSED__ = true;
-
let realFrameStartTime = 0;
/** Control timeline loop */
@@ -53,7 +51,7 @@ let timelineTime = 0;
function runFrame() {
realFrameStartTime = NativeDate.now();
frameIdx++;
- timelineTime += FIXED_FRAME_TIME;
+ timelineTime += fixedFrameTime;
const currentRafCbs = rafCbs;
// Clear before calling the callbacks. raf may be registered in the
callback
rafCbs = [];
@@ -73,9 +71,7 @@ function timelineLoop() {
if (!isMocking) {
return;
}
- if (!__VRT_TIMELINE_PAUSED__) {
- runFrame();
- }
+ runFrame();
nativeRaf(timelineLoop);
}
@@ -91,7 +87,7 @@ let timeoutId = 1;
let intervalId = 1;
mockedTimeout = function (cb, timeout) {
- const elapsedFrame = Math.ceil(Math.max(timeout || 0, 1) /
FIXED_FRAME_TIME);
+ const elapsedFrame = Math.ceil(Math.max(timeout || 0, 1) / fixedFrameTime);
timeoutHandlers.push({
callback: cb,
id: timeoutId,
@@ -131,7 +127,7 @@ function flushTimeoutHandlers() {
}
mockedInterval = function (cb, interval) {
- const intervalFrame = Math.ceil(Math.max(interval || 0, 1) /
FIXED_FRAME_TIME);
+ const intervalFrame = Math.ceil(Math.max(interval || 0, 1) /
fixedFrameTime);
intervalHandlers.push({
callback: cb,
id: intervalId,
@@ -197,19 +193,6 @@ Object.setPrototypeOf(MockDate, NativeDate);
// TODO Do we need to mock performance? Or leave some API that can keep real.
-
-export function start() {
- window.__VRT_TIMELINE_PAUSED__ = false;
-}
-
-export function pause() {
- window.__VRT_TIMELINE_PAUSED__ = true;
-}
-
-export function resume() {
- window.__VRT_TIMELINE_PAUSED__ = false;
-}
-
window.requestAnimationFrame = function (cb) {
if (isMocking) {
mockedRaf(cb);
@@ -219,6 +202,10 @@ window.requestAnimationFrame = function (cb) {
}
};
+export function setFixedFrameRate(fps: number) {
+ fixedFrameTime = fps > 0 ? 1000 / fps : 16;
+}
+
export function startMock() {
isMocking = true;
window.setTimeout = mockedTimeout;
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
