diff --git a/host/figures/Bio/BioCalltree.jpg b/host/figures/Bio/BioCalltree.jpg new file mode 100644 index 0000000000000000000000000000000000000000..ee3f25ddb028fbda43662b7baf976fc990407de8 Binary files /dev/null and b/host/figures/Bio/BioCalltree.jpg differ diff --git a/host/figures/Bio/BioOptions.jpg b/host/figures/Bio/BioOptions.jpg new file mode 100644 index 0000000000000000000000000000000000000000..80dd5a57e9f373cccf373c6b7fda9c3fc513ff15 Binary files /dev/null and b/host/figures/Bio/BioOptions.jpg differ diff --git a/host/figures/Bio/Biochart.jpg b/host/figures/Bio/Biochart.jpg new file mode 100644 index 0000000000000000000000000000000000000000..b5451727c787f29b45ac8a4aad974b9062b30925 Binary files /dev/null and b/host/figures/Bio/Biochart.jpg differ diff --git a/host/figures/Bio/Biocounter.jpg b/host/figures/Bio/Biocounter.jpg new file mode 100644 index 0000000000000000000000000000000000000000..c2eedd02185175fe09cd6c180fc3af8777aeb283 Binary files /dev/null and b/host/figures/Bio/Biocounter.jpg differ diff --git a/host/figures/Bio/Biodatamining.jpg b/host/figures/Bio/Biodatamining.jpg new file mode 100644 index 0000000000000000000000000000000000000000..abc7a5dd5bc29966d066e8dacca88f0c6a974948 Binary files /dev/null and b/host/figures/Bio/Biodatamining.jpg differ diff --git a/host/figures/Bio/Bioexcuting.jpg b/host/figures/Bio/Bioexcuting.jpg new file mode 100644 index 0000000000000000000000000000000000000000..fc5bb3891d86b03744d14d10940d406f7fc06a0d Binary files /dev/null and b/host/figures/Bio/Bioexcuting.jpg differ diff --git a/host/figures/Bio/Biofilter.jpg b/host/figures/Bio/Biofilter.jpg new file mode 100644 index 0000000000000000000000000000000000000000..851944c928003870a4693ecae15d08c30c17c50c Binary files /dev/null and b/host/figures/Bio/Biofilter.jpg differ diff --git a/host/figures/Bio/Bioflame.jpg b/host/figures/Bio/Bioflame.jpg new file mode 100644 index 0000000000000000000000000000000000000000..592e6b343243a00ecdefc4aef63b7c6e5d5bc51b Binary files /dev/null and b/host/figures/Bio/Bioflame.jpg differ diff --git a/host/figures/Bio/Bioflamelevel.jpg b/host/figures/Bio/Bioflamelevel.jpg new file mode 100644 index 0000000000000000000000000000000000000000..78d2f14c2ca40f20a231c7dc060a667f08356914 Binary files /dev/null and b/host/figures/Bio/Bioflamelevel.jpg differ diff --git a/host/figures/Bio/Bioflameshow.jpg b/host/figures/Bio/Bioflameshow.jpg new file mode 100644 index 0000000000000000000000000000000000000000..f7e8f9974ee4a6131e87f2164dde82009e2cf0a9 Binary files /dev/null and b/host/figures/Bio/Bioflameshow.jpg differ diff --git a/host/figures/Bio/Bioheaviesttrace.jpg b/host/figures/Bio/Bioheaviesttrace.jpg new file mode 100644 index 0000000000000000000000000000000000000000..e76b66303697967022de21c22e4b7bad1f2e1c93 Binary files /dev/null and b/host/figures/Bio/Bioheaviesttrace.jpg differ diff --git a/host/figures/Bio/Bioinputfilter.jpg b/host/figures/Bio/Bioinputfilter.jpg new file mode 100644 index 0000000000000000000000000000000000000000..6d6e6b1a8b250e0eb01b5ba7882d2a0da8f00cc5 Binary files /dev/null and b/host/figures/Bio/Bioinputfilter.jpg differ diff --git a/host/figures/Bio/Biorecord.jpg b/host/figures/Bio/Biorecord.jpg new file mode 100644 index 0000000000000000000000000000000000000000..d4aed0679233db239eb1b34cb06759d88d500399 Binary files /dev/null and b/host/figures/Bio/Biorecord.jpg differ diff --git a/host/figures/Bio/Biosetting.jpg b/host/figures/Bio/Biosetting.jpg new file mode 100644 index 0000000000000000000000000000000000000000..6181cf4ac871a67bb7aa06601e8e7aaaabc061fb Binary files /dev/null and b/host/figures/Bio/Biosetting.jpg differ diff --git a/host/figures/Bio/Biostatistics.jpg b/host/figures/Bio/Biostatistics.jpg new file mode 100644 index 0000000000000000000000000000000000000000..259a9bc8f77c6db6f5516b57b60ed27915406ff5 Binary files /dev/null and b/host/figures/Bio/Biostatistics.jpg differ diff --git a/host/figures/Bio/Biosummary.jpg b/host/figures/Bio/Biosummary.jpg new file mode 100644 index 0000000000000000000000000000000000000000..9d102cd8d03af610d7fa905664401df8334cb539 Binary files /dev/null and b/host/figures/Bio/Biosummary.jpg differ diff --git a/host/figures/Bio/Biotimes.jpg b/host/figures/Bio/Biotimes.jpg new file mode 100644 index 0000000000000000000000000000000000000000..60cd75aca70a6d55a66a26f9bd766fbefe7c6f33 Binary files /dev/null and b/host/figures/Bio/Biotimes.jpg differ diff --git a/host/figures/EBPF/EBPFchart.jpg b/host/figures/EBPF/EBPFchart.jpg new file mode 100644 index 0000000000000000000000000000000000000000..6f19739e32b7cc583fdc46694aabc062db90b86d Binary files /dev/null and b/host/figures/EBPF/EBPFchart.jpg differ diff --git a/host/figures/EBPF/EBPFcount.jpg b/host/figures/EBPF/EBPFcount.jpg new file mode 100644 index 0000000000000000000000000000000000000000..d6ae10d0329df5da0d8f6bef8fda3416b5843036 Binary files /dev/null and b/host/figures/EBPF/EBPFcount.jpg differ diff --git a/host/figures/EBPF/VMCalltree.jpg b/host/figures/EBPF/VMCalltree.jpg new file mode 100644 index 0000000000000000000000000000000000000000..e8cc24bb1dbe1344c2bebed940d59267cd7a1318 Binary files /dev/null and b/host/figures/EBPF/VMCalltree.jpg differ diff --git a/host/figures/EBPF/VMEvents.jpg b/host/figures/EBPF/VMEvents.jpg new file mode 100644 index 0000000000000000000000000000000000000000..67e9995426c8e2983de24e21fd9785e9713e1125 Binary files /dev/null and b/host/figures/EBPF/VMEvents.jpg differ diff --git a/host/figures/EBPF/VMfilter.jpg b/host/figures/EBPF/VMfilter.jpg new file mode 100644 index 0000000000000000000000000000000000000000..fb29b5d8c8ca9a6202d96f8f5febf5bf45cd7514 Binary files /dev/null and b/host/figures/EBPF/VMfilter.jpg differ diff --git a/host/figures/EBPF/ebpf_bythread.jpg b/host/figures/EBPF/ebpf_bythread.jpg new file mode 100644 index 0000000000000000000000000000000000000000..eb5bf673a8d9d5244b1f1f61fd04ad9db21e66fc Binary files /dev/null and b/host/figures/EBPF/ebpf_bythread.jpg differ diff --git a/host/figures/EBPF/ebpfcommand.jpg b/host/figures/EBPF/ebpfcommand.jpg new file mode 100644 index 0000000000000000000000000000000000000000..2af7869dba909de20ea57959bddce15a53f3d572 Binary files /dev/null and b/host/figures/EBPF/ebpfcommand.jpg differ diff --git a/host/figures/EBPF/ebpfexcuting.jpg b/host/figures/EBPF/ebpfexcuting.jpg new file mode 100644 index 0000000000000000000000000000000000000000..54b3afd3e2410f60df2c2bd79490d7bc88a902f8 Binary files /dev/null and b/host/figures/EBPF/ebpfexcuting.jpg differ diff --git a/host/figures/EBPF/ebpfrecord.jpg b/host/figures/EBPF/ebpfrecord.jpg new file mode 100644 index 0000000000000000000000000000000000000000..706f7b8271eb363eeb2c93cc2be677176a21b32e Binary files /dev/null and b/host/figures/EBPF/ebpfrecord.jpg differ diff --git a/host/figures/EBPF/ebpfsetting.jpg b/host/figures/EBPF/ebpfsetting.jpg new file mode 100644 index 0000000000000000000000000000000000000000..e3f294f4274a2f97580eee974791434d42ecc4c1 Binary files /dev/null and b/host/figures/EBPF/ebpfsetting.jpg differ diff --git a/host/figures/EBPF/ebpfsummary.jpg b/host/figures/EBPF/ebpfsummary.jpg new file mode 100644 index 0000000000000000000000000000000000000000..5f08df19a4ea33c2c872ec616e9b810f296aa908 Binary files /dev/null and b/host/figures/EBPF/ebpfsummary.jpg differ diff --git a/host/figures/EBPF/vmOptions.jpg b/host/figures/EBPF/vmOptions.jpg new file mode 100644 index 0000000000000000000000000000000000000000..d6a38ba30aae5988f2c6c88ed784148a18515e8d Binary files /dev/null and b/host/figures/EBPF/vmOptions.jpg differ diff --git a/host/figures/EBPF/vmcounter.jpg b/host/figures/EBPF/vmcounter.jpg new file mode 100644 index 0000000000000000000000000000000000000000..cfe3852d8b39c2d432fed6cb90dffdb06c36d570 Binary files /dev/null and b/host/figures/EBPF/vmcounter.jpg differ diff --git a/host/figures/EBPF/vmdatamining.jpg b/host/figures/EBPF/vmdatamining.jpg new file mode 100644 index 0000000000000000000000000000000000000000..4f732ce0053611e92124194095a89865df55e1e1 Binary files /dev/null and b/host/figures/EBPF/vmdatamining.jpg differ diff --git a/host/figures/EBPF/vmflame.jpg b/host/figures/EBPF/vmflame.jpg new file mode 100644 index 0000000000000000000000000000000000000000..6cb5ddeb7f91adc8113281e5042df9ab4722c965 Binary files /dev/null and b/host/figures/EBPF/vmflame.jpg differ diff --git a/host/figures/EBPF/vmflamelevel.jpg b/host/figures/EBPF/vmflamelevel.jpg new file mode 100644 index 0000000000000000000000000000000000000000..37b9b4f64420deeca9f587483e8ff4efffa5dd0f Binary files /dev/null and b/host/figures/EBPF/vmflamelevel.jpg differ diff --git a/host/figures/EBPF/vmflameshow.jpg b/host/figures/EBPF/vmflameshow.jpg new file mode 100644 index 0000000000000000000000000000000000000000..a9cef6d91b3affcc951cbe090c5476e7c364aa6a Binary files /dev/null and b/host/figures/EBPF/vmflameshow.jpg differ diff --git a/host/figures/EBPF/vmheaviesttrace.jpg b/host/figures/EBPF/vmheaviesttrace.jpg new file mode 100644 index 0000000000000000000000000000000000000000..686e2cea8757ab625739bf0248634f8b443c8e90 Binary files /dev/null and b/host/figures/EBPF/vmheaviesttrace.jpg differ diff --git a/host/figures/EBPF/vminputfilter.jpg b/host/figures/EBPF/vminputfilter.jpg new file mode 100644 index 0000000000000000000000000000000000000000..a72512b81d455b732e61e4f551b1c68c11bc1020 Binary files /dev/null and b/host/figures/EBPF/vminputfilter.jpg differ diff --git a/host/figures/EBPF/vmstatistics.jpg b/host/figures/EBPF/vmstatistics.jpg new file mode 100644 index 0000000000000000000000000000000000000000..e316dd2623fd8dccf61f956a9006ba8768ef8253 Binary files /dev/null and b/host/figures/EBPF/vmstatistics.jpg differ diff --git a/host/figures/FileSystem/FileSystemCalltree.jpg b/host/figures/FileSystem/FileSystemCalltree.jpg new file mode 100644 index 0000000000000000000000000000000000000000..6e7e2de008c1e5d6b670e9d6109292fc1a21e10e Binary files /dev/null and b/host/figures/FileSystem/FileSystemCalltree.jpg differ diff --git a/host/figures/FileSystem/FileSystemOptions.jpg b/host/figures/FileSystem/FileSystemOptions.jpg new file mode 100644 index 0000000000000000000000000000000000000000..b5ce7a6a6816502550c40d7e5237a8bd088233d0 Binary files /dev/null and b/host/figures/FileSystem/FileSystemOptions.jpg differ diff --git a/host/figures/FileSystem/FileSystemchart.jpg b/host/figures/FileSystem/FileSystemchart.jpg new file mode 100644 index 0000000000000000000000000000000000000000..77ee172cf174350a55027c91ccc8f76b06596ad5 Binary files /dev/null and b/host/figures/FileSystem/FileSystemchart.jpg differ diff --git a/host/figures/FileSystem/FileSystemcommand.jpg b/host/figures/FileSystem/FileSystemcommand.jpg new file mode 100644 index 0000000000000000000000000000000000000000..4f8a671ee41b3205c84ae4d932f3e10a72edd888 Binary files /dev/null and b/host/figures/FileSystem/FileSystemcommand.jpg differ diff --git a/host/figures/FileSystem/FileSystemcount.jpg b/host/figures/FileSystem/FileSystemcount.jpg new file mode 100644 index 0000000000000000000000000000000000000000..6c049c9b564b301f5b28820bf748dc9831a29bb7 Binary files /dev/null and b/host/figures/FileSystem/FileSystemcount.jpg differ diff --git a/host/figures/FileSystem/FileSystemdatamining.jpg b/host/figures/FileSystem/FileSystemdatamining.jpg new file mode 100644 index 0000000000000000000000000000000000000000..dbcd816b0ac0db534f97f05d263e8aca4db12019 Binary files /dev/null and b/host/figures/FileSystem/FileSystemdatamining.jpg differ diff --git a/host/figures/FileSystem/FileSystemevents.jpg b/host/figures/FileSystem/FileSystemevents.jpg new file mode 100644 index 0000000000000000000000000000000000000000..5914209c0352e4cb950f361af79fa2395fe9508f Binary files /dev/null and b/host/figures/FileSystem/FileSystemevents.jpg differ diff --git a/host/figures/FileSystem/FileSystemexcutecommand.jpg b/host/figures/FileSystem/FileSystemexcutecommand.jpg new file mode 100644 index 0000000000000000000000000000000000000000..abd178fdab114642fcde657a497dc97a3f0804ec Binary files /dev/null and b/host/figures/FileSystem/FileSystemexcutecommand.jpg differ diff --git a/host/figures/FileSystem/FileSystemfile.jpg b/host/figures/FileSystem/FileSystemfile.jpg new file mode 100644 index 0000000000000000000000000000000000000000..536595781f01a39a41079c141439e0989bd6ca3b Binary files /dev/null and b/host/figures/FileSystem/FileSystemfile.jpg differ diff --git a/host/figures/FileSystem/FileSystemflame.jpg b/host/figures/FileSystem/FileSystemflame.jpg new file mode 100644 index 0000000000000000000000000000000000000000..d644c143e7a782d2a7e03708a589c2bc701d92d5 Binary files /dev/null and b/host/figures/FileSystem/FileSystemflame.jpg differ diff --git a/host/figures/FileSystem/FileSystemflamelevel.jpg b/host/figures/FileSystem/FileSystemflamelevel.jpg new file mode 100644 index 0000000000000000000000000000000000000000..2cff0eeb107da9e4155944eca57590011ed8b34e Binary files /dev/null and b/host/figures/FileSystem/FileSystemflamelevel.jpg differ diff --git a/host/figures/FileSystem/FileSystemflameshow.jpg b/host/figures/FileSystem/FileSystemflameshow.jpg new file mode 100644 index 0000000000000000000000000000000000000000..b03f7b31ca17606e26768406a0effab4a3ec5cee Binary files /dev/null and b/host/figures/FileSystem/FileSystemflameshow.jpg differ diff --git a/host/figures/FileSystem/FileSystemheaviesttrace.jpg b/host/figures/FileSystem/FileSystemheaviesttrace.jpg new file mode 100644 index 0000000000000000000000000000000000000000..2644870c90be8fcaa7a8ecc370a35faacdee2534 Binary files /dev/null and b/host/figures/FileSystem/FileSystemheaviesttrace.jpg differ diff --git a/host/figures/FileSystem/FileSystemhistory.jpg b/host/figures/FileSystem/FileSystemhistory.jpg new file mode 100644 index 0000000000000000000000000000000000000000..2cf792ddc44796d32114a4be2c4463c192a74b3e Binary files /dev/null and b/host/figures/FileSystem/FileSystemhistory.jpg differ diff --git a/host/figures/FileSystem/FileSysteminputfilter.jpg b/host/figures/FileSystem/FileSysteminputfilter.jpg new file mode 100644 index 0000000000000000000000000000000000000000..ec0965db18378980c4f63be7a812a19ded10aaa9 Binary files /dev/null and b/host/figures/FileSystem/FileSysteminputfilter.jpg differ diff --git a/host/figures/FileSystem/FileSystemsamplecounter.jpg b/host/figures/FileSystem/FileSystemsamplecounter.jpg new file mode 100644 index 0000000000000000000000000000000000000000..666200868fce4b88495e1f3a95741ee84cf11ade Binary files /dev/null and b/host/figures/FileSystem/FileSystemsamplecounter.jpg differ diff --git a/host/figures/FileSystem/FileSystemstatistics.jpg b/host/figures/FileSystem/FileSystemstatistics.jpg new file mode 100644 index 0000000000000000000000000000000000000000..86e2838c35e8c44dd740ce0c3847ab8aea873bac Binary files /dev/null and b/host/figures/FileSystem/FileSystemstatistics.jpg differ diff --git a/host/figures/FileSystem/FileSystemsummary.jpg b/host/figures/FileSystem/FileSystemsummary.jpg new file mode 100644 index 0000000000000000000000000000000000000000..b2e201cc6dca939ff309c5aca740bca190c07dd0 Binary files /dev/null and b/host/figures/FileSystem/FileSystemsummary.jpg differ diff --git a/host/figures/FileSystem/FileSystemtimeslice.jpg b/host/figures/FileSystem/FileSystemtimeslice.jpg new file mode 100644 index 0000000000000000000000000000000000000000..570ada550e41b1850a01c55cc51444f2be922b2c Binary files /dev/null and b/host/figures/FileSystem/FileSystemtimeslice.jpg differ diff --git a/host/figures/FileSystem/filesystemfilter.jpg b/host/figures/FileSystem/filesystemfilter.jpg new file mode 100644 index 0000000000000000000000000000000000000000..39bffd42a0f6c667ad1aad05ee27b31c2782fa9b Binary files /dev/null and b/host/figures/FileSystem/filesystemfilter.jpg differ diff --git a/host/figures/FileSystem/filesystemrecord.jpg b/host/figures/FileSystem/filesystemrecord.jpg new file mode 100644 index 0000000000000000000000000000000000000000..f6130bb8c8c222bbd58b40d8a562575c07e1270e Binary files /dev/null and b/host/figures/FileSystem/filesystemrecord.jpg differ diff --git a/host/figures/FileSystem/filesystemsetting.jpg b/host/figures/FileSystem/filesystemsetting.jpg new file mode 100644 index 0000000000000000000000000000000000000000..3c5e3cee77c95c51159905045c6a2dd9a290e2d9 Binary files /dev/null and b/host/figures/FileSystem/filesystemsetting.jpg differ diff --git a/host/figures/HiSystemEvent/hisyseventPowerBattery.jpg b/host/figures/HiSystemEvent/hisyseventPowerBattery.jpg new file mode 100644 index 0000000000000000000000000000000000000000..b38ed1956188e99d96eaa35c414ba04d66ebd843 Binary files /dev/null and b/host/figures/HiSystemEvent/hisyseventPowerBattery.jpg differ diff --git a/host/figures/HiSystemEvent/hisyseventPowerdetails.jpg b/host/figures/HiSystemEvent/hisyseventPowerdetails.jpg new file mode 100644 index 0000000000000000000000000000000000000000..ce1e9af717655d732a90fe086f04a9734e1e7cbf Binary files /dev/null and b/host/figures/HiSystemEvent/hisyseventPowerdetails.jpg differ diff --git a/host/figures/HiSystemEvent/hisyseventsetting.jpg b/host/figures/HiSystemEvent/hisyseventsetting.jpg new file mode 100644 index 0000000000000000000000000000000000000000..20d75c8776e91be32f5013cbcb27085d2995b3b2 Binary files /dev/null and b/host/figures/HiSystemEvent/hisyseventsetting.jpg differ diff --git a/host/figures/HiSystemEvent/hisystemcommand.jpg b/host/figures/HiSystemEvent/hisystemcommand.jpg new file mode 100644 index 0000000000000000000000000000000000000000..a213fb514968fc44ec993d6af4c5a15712d59141 Binary files /dev/null and b/host/figures/HiSystemEvent/hisystemcommand.jpg differ diff --git a/host/figures/HiSystemEvent/hisystemdetails.jpg b/host/figures/HiSystemEvent/hisystemdetails.jpg new file mode 100644 index 0000000000000000000000000000000000000000..92e88f53834cf64559ad1841ac7f797574e5b114 Binary files /dev/null and b/host/figures/HiSystemEvent/hisystemdetails.jpg differ diff --git a/host/figures/HiSystemEvent/hisystemeventemexcutecommand.jpg b/host/figures/HiSystemEvent/hisystemeventemexcutecommand.jpg new file mode 100644 index 0000000000000000000000000000000000000000..ecbb7e70783c4d22be242e45bfb881ac45b75dba Binary files /dev/null and b/host/figures/HiSystemEvent/hisystemeventemexcutecommand.jpg differ diff --git a/host/figures/HiSystemEvent/hisystemeventfile.jpg b/host/figures/HiSystemEvent/hisystemeventfile.jpg new file mode 100644 index 0000000000000000000000000000000000000000..df88e858a69ecf2e4a9a9f3f85bd8c71c0f750a3 Binary files /dev/null and b/host/figures/HiSystemEvent/hisystemeventfile.jpg differ diff --git a/host/figures/HiSystemEvent/hisystemeventrecord.jpg b/host/figures/HiSystemEvent/hisystemeventrecord.jpg new file mode 100644 index 0000000000000000000000000000000000000000..8ef5587d40bf09e2325f5d696cd9761380ca21e5 Binary files /dev/null and b/host/figures/HiSystemEvent/hisystemeventrecord.jpg differ diff --git a/host/figures/HiSystemEvent/hisystemeventsummary.jpg b/host/figures/HiSystemEvent/hisystemeventsummary.jpg new file mode 100644 index 0000000000000000000000000000000000000000..ce9654a92bd2e8564023b4fdeea4c711ec3e976c Binary files /dev/null and b/host/figures/HiSystemEvent/hisystemeventsummary.jpg differ diff --git a/host/figures/HiSystemEvent/systemselectdetals.jpg b/host/figures/HiSystemEvent/systemselectdetals.jpg new file mode 100644 index 0000000000000000000000000000000000000000..65fee85ce45ea6ebcfbd57bdd2e2b5001ad73365 Binary files /dev/null and b/host/figures/HiSystemEvent/systemselectdetals.jpg differ diff --git a/host/figures/Metrics/Sql.jpg b/host/figures/Metrics/Sql.jpg new file mode 100644 index 0000000000000000000000000000000000000000..ecbea173d79c563dcd104e77b08cc1b7863ca214 Binary files /dev/null and b/host/figures/Metrics/Sql.jpg differ diff --git a/host/figures/Metrics/download.jpg b/host/figures/Metrics/download.jpg new file mode 100644 index 0000000000000000000000000000000000000000..227a292968d3ddefe6ac0252a620ec36e179d2cd Binary files /dev/null and b/host/figures/Metrics/download.jpg differ diff --git a/host/figures/Metrics/infoandstats.jpg b/host/figures/Metrics/infoandstats.jpg new file mode 100644 index 0000000000000000000000000000000000000000..79d8be3e5c48ff7070d45a99b7875390ce6edbd5 Binary files /dev/null and b/host/figures/Metrics/infoandstats.jpg differ diff --git a/host/figures/Metrics/metrics.jpg b/host/figures/Metrics/metrics.jpg new file mode 100644 index 0000000000000000000000000000000000000000..d00a8999fe7c9790bf9e3d4c55ee6d05bd3f7568 Binary files /dev/null and b/host/figures/Metrics/metrics.jpg differ diff --git a/host/figures/Scheduling.jpg b/host/figures/Scheduling.jpg deleted file mode 100644 index f7c5dd57bfcb038656d0fbe80cc7e685701ae479..0000000000000000000000000000000000000000 Binary files a/host/figures/Scheduling.jpg and /dev/null differ diff --git a/host/figures/Web/M.jpg b/host/figures/Web/M.jpg new file mode 100644 index 0000000000000000000000000000000000000000..574188a550e2fd585d5f596ac7076c9adc31fcf9 Binary files /dev/null and b/host/figures/Web/M.jpg differ diff --git a/host/figures/Web/StatesList.jpg b/host/figures/Web/StatesList.jpg new file mode 100644 index 0000000000000000000000000000000000000000..511000076ca1034ef6f286182d6d1ee8b529070f Binary files /dev/null and b/host/figures/Web/StatesList.jpg differ diff --git a/host/figures/Web/Switchlist.jpg b/host/figures/Web/Switchlist.jpg new file mode 100644 index 0000000000000000000000000000000000000000..75e572346234b744ecb48286b896558c1635111c Binary files /dev/null and b/host/figures/Web/Switchlist.jpg differ diff --git a/host/figures/callstackclick.jpg b/host/figures/Web/callstackclick.jpg similarity index 100% rename from host/figures/callstackclick.jpg rename to host/figures/Web/callstackclick.jpg diff --git a/host/figures/callstackselect.jpg b/host/figures/Web/callstackselect.jpg similarity index 100% rename from host/figures/callstackselect.jpg rename to host/figures/Web/callstackselect.jpg diff --git a/host/figures/Web/checkbox.jpg b/host/figures/Web/checkbox.jpg new file mode 100644 index 0000000000000000000000000000000000000000..acbc9a40be5c054184bcbff8dba257b9d277e51d Binary files /dev/null and b/host/figures/Web/checkbox.jpg differ diff --git a/host/figures/cpu.jpg b/host/figures/Web/cpu.jpg similarity index 100% rename from host/figures/cpu.jpg rename to host/figures/Web/cpu.jpg diff --git a/host/figures/Web/cpubyprocess.jpg b/host/figures/Web/cpubyprocess.jpg new file mode 100644 index 0000000000000000000000000000000000000000..470d4f3fdf5119773bc7b180d880a962d495b19d Binary files /dev/null and b/host/figures/Web/cpubyprocess.jpg differ diff --git a/host/figures/Web/cpubythread.jpg b/host/figures/Web/cpubythread.jpg new file mode 100644 index 0000000000000000000000000000000000000000..99c06e9d6fc87e390f33297623f519dc8fc37189 Binary files /dev/null and b/host/figures/Web/cpubythread.jpg differ diff --git a/host/figures/cpuclick.jpg b/host/figures/Web/cpuclick.jpg similarity index 100% rename from host/figures/cpuclick.jpg rename to host/figures/Web/cpuclick.jpg diff --git a/host/figures/Web/cpusage.jpg b/host/figures/Web/cpusage.jpg new file mode 100644 index 0000000000000000000000000000000000000000..ecb696bb7f4bc7212999941c208daef0ff5abab5 Binary files /dev/null and b/host/figures/Web/cpusage.jpg differ diff --git a/host/figures/Web/details.jpg b/host/figures/Web/details.jpg new file mode 100644 index 0000000000000000000000000000000000000000..9d9faf9dac54e6ec29953be33def7250e0eaa44b Binary files /dev/null and b/host/figures/Web/details.jpg differ diff --git a/host/figures/Web/flag.jpg b/host/figures/Web/flag.jpg new file mode 100644 index 0000000000000000000000000000000000000000..8720740c3256c2b64be4411809d9fa87d1ba0100 Binary files /dev/null and b/host/figures/Web/flag.jpg differ diff --git a/host/figures/Web/flaginput.jpg b/host/figures/Web/flaginput.jpg new file mode 100644 index 0000000000000000000000000000000000000000..bc0b554ebb7569a2c65424c1025c7115b3f1c77d Binary files /dev/null and b/host/figures/Web/flaginput.jpg differ diff --git a/host/figures/fps.jpg b/host/figures/Web/fps.jpg similarity index 100% rename from host/figures/fps.jpg rename to host/figures/Web/fps.jpg diff --git a/host/figures/fpsselect.jpg b/host/figures/Web/fpsselect.jpg similarity index 100% rename from host/figures/fpsselect.jpg rename to host/figures/Web/fpsselect.jpg diff --git a/host/figures/Web/fpstip.jpg b/host/figures/Web/fpstip.jpg new file mode 100644 index 0000000000000000000000000000000000000000..7b5954226117c9ffd08fb2a974214006180a8160 Binary files /dev/null and b/host/figures/Web/fpstip.jpg differ diff --git a/host/figures/gray.jpg b/host/figures/Web/gray.jpg similarity index 100% rename from host/figures/gray.jpg rename to host/figures/Web/gray.jpg diff --git a/host/figures/highlit.jpg b/host/figures/Web/highlit.jpg similarity index 100% rename from host/figures/highlit.jpg rename to host/figures/Web/highlit.jpg diff --git a/host/figures/Web/jumpthread.jpg b/host/figures/Web/jumpthread.jpg new file mode 100644 index 0000000000000000000000000000000000000000..bdb494ed810dab30cfd998718c08d6b891dd09db Binary files /dev/null and b/host/figures/Web/jumpthread.jpg differ diff --git a/host/figures/main.jpg b/host/figures/Web/main.jpg similarity index 100% rename from host/figures/main.jpg rename to host/figures/Web/main.jpg diff --git a/host/figures/Web/opentrace.jpg b/host/figures/Web/opentrace.jpg new file mode 100644 index 0000000000000000000000000000000000000000..249bfb1c244ebdf79e7afa0e5d63435313487156 Binary files /dev/null and b/host/figures/Web/opentrace.jpg differ diff --git a/host/figures/process.jpg b/host/figures/Web/process.jpg similarity index 100% rename from host/figures/process.jpg rename to host/figures/Web/process.jpg diff --git a/host/figures/Web/search.jpg b/host/figures/Web/search.jpg new file mode 100644 index 0000000000000000000000000000000000000000..9e5900ec03c7cc688c2f150775db3a0b11028e71 Binary files /dev/null and b/host/figures/Web/search.jpg differ diff --git a/host/figures/Web/searchcallstack.jpg b/host/figures/Web/searchcallstack.jpg new file mode 100644 index 0000000000000000000000000000000000000000..2dbd4cf5a838980b641df9a4e9c2871fd73034d8 Binary files /dev/null and b/host/figures/Web/searchcallstack.jpg differ diff --git a/host/figures/Web/stars.jpg b/host/figures/Web/stars.jpg new file mode 100644 index 0000000000000000000000000000000000000000..62a3492126d240e8080f4be976abe0eb2d99315d Binary files /dev/null and b/host/figures/Web/stars.jpg differ diff --git a/host/figures/threadclick.jpg b/host/figures/Web/threadclick.jpg similarity index 100% rename from host/figures/threadclick.jpg rename to host/figures/Web/threadclick.jpg diff --git a/host/figures/threadinfo.jpg b/host/figures/Web/threadinfo.jpg similarity index 100% rename from host/figures/threadinfo.jpg rename to host/figures/Web/threadinfo.jpg diff --git a/host/figures/threadselect.jpg b/host/figures/Web/threadselect.jpg similarity index 100% rename from host/figures/threadselect.jpg rename to host/figures/Web/threadselect.jpg diff --git a/host/figures/Web/threadstates.jpg b/host/figures/Web/threadstates.jpg new file mode 100644 index 0000000000000000000000000000000000000000..475dde7276e119266eb76d2ab0f3d4eaa45d9df1 Binary files /dev/null and b/host/figures/Web/threadstates.jpg differ diff --git a/host/figures/Web/threadswitches.jpg b/host/figures/Web/threadswitches.jpg new file mode 100644 index 0000000000000000000000000000000000000000..cc5974681992956657428d63cb8fbf8b8e01bd1c Binary files /dev/null and b/host/figures/Web/threadswitches.jpg differ diff --git a/host/figures/time.jpg b/host/figures/Web/time.jpg similarity index 100% rename from host/figures/time.jpg rename to host/figures/Web/time.jpg diff --git a/host/figures/Web/trace.jpg b/host/figures/Web/trace.jpg new file mode 100644 index 0000000000000000000000000000000000000000..3975199b39ee1cc2187358fef66932eea4b1c1b2 Binary files /dev/null and b/host/figures/Web/trace.jpg differ diff --git a/host/figures/command.jpg b/host/figures/command.jpg deleted file mode 100644 index 553077d0f5dcea3276b090162992f95f650cae1c..0000000000000000000000000000000000000000 Binary files a/host/figures/command.jpg and /dev/null differ diff --git a/host/figures/cpu_frequency.png b/host/figures/cpu_frequency.png deleted file mode 100644 index a18715fc696b3231b94425e4acd6aaf319bf399f..0000000000000000000000000000000000000000 Binary files a/host/figures/cpu_frequency.png and /dev/null differ diff --git a/host/figures/cpubyprocess.jpg b/host/figures/cpubyprocess.jpg deleted file mode 100644 index 180597dcbe73e1dba3ce58f348ca5b71da9077bd..0000000000000000000000000000000000000000 Binary files a/host/figures/cpubyprocess.jpg and /dev/null differ diff --git a/host/figures/cpubythread.jpg b/host/figures/cpubythread.jpg deleted file mode 100644 index 0ada58ba849f9b2c5dcfa83c44fdda94ab696879..0000000000000000000000000000000000000000 Binary files a/host/figures/cpubythread.jpg and /dev/null differ diff --git a/host/figures/cpusage.jpg b/host/figures/cpusage.jpg deleted file mode 100644 index 0aba4c0ee62c02bc846ab17d3f2cdb244dbe66d2..0000000000000000000000000000000000000000 Binary files a/host/figures/cpusage.jpg and /dev/null differ diff --git a/host/figures/deploy/bin_files.png b/host/figures/deploy/bin_files.png new file mode 100644 index 0000000000000000000000000000000000000000..6657337dce8d72b262e1c02473098f5be59aa33c Binary files /dev/null and b/host/figures/deploy/bin_files.png differ diff --git a/host/figures/deploy/check_version.png b/host/figures/deploy/check_version.png new file mode 100644 index 0000000000000000000000000000000000000000..1b33a994141c82e4dc574aa1d1f774aa8d4fdc28 Binary files /dev/null and b/host/figures/deploy/check_version.png differ diff --git a/host/figures/deploy/chomd+x.png b/host/figures/deploy/chomd+x.png new file mode 100644 index 0000000000000000000000000000000000000000..e2781fc8e4fe005376d85b18ca220a5c6ef8a5e5 Binary files /dev/null and b/host/figures/deploy/chomd+x.png differ diff --git a/host/figures/deploy/compile.png b/host/figures/deploy/compile.png new file mode 100644 index 0000000000000000000000000000000000000000..1221e25c0b69e87feaeddf767334620716fe4726 Binary files /dev/null and b/host/figures/deploy/compile.png differ diff --git a/host/figures/deploy/install_golang.png b/host/figures/deploy/install_golang.png new file mode 100644 index 0000000000000000000000000000000000000000..a4a58e9fa7e5f4ede6d96b6a2727f1385292c28c Binary files /dev/null and b/host/figures/deploy/install_golang.png differ diff --git a/host/figures/deploy/install_node.png b/host/figures/deploy/install_node.png new file mode 100644 index 0000000000000000000000000000000000000000..14f15af1343948d39098f2f75c7cd64dd2c0b412 Binary files /dev/null and b/host/figures/deploy/install_node.png differ diff --git a/host/figures/deploy/install_tsc.png b/host/figures/deploy/install_tsc.png new file mode 100644 index 0000000000000000000000000000000000000000..5ea36c6a86b8459d0ca34ddc4c20bbd651828a3a Binary files /dev/null and b/host/figures/deploy/install_tsc.png differ diff --git a/host/figures/deploy/put_bin.png b/host/figures/deploy/put_bin.png new file mode 100644 index 0000000000000000000000000000000000000000..7945c95d265437d89924d8d19072f643f7b19b62 Binary files /dev/null and b/host/figures/deploy/put_bin.png differ diff --git a/host/figures/deploy/run_main.png b/host/figures/deploy/run_main.png new file mode 100644 index 0000000000000000000000000000000000000000..c074ce6b113a0a41a80b7bd609781b02ee18fcd9 Binary files /dev/null and b/host/figures/deploy/run_main.png differ diff --git a/host/figures/deploy/third_party.png b/host/figures/deploy/third_party.png new file mode 100644 index 0000000000000000000000000000000000000000..77ff8ca912ee369c1f8407ce511e4e17de16c579 Binary files /dev/null and b/host/figures/deploy/third_party.png differ diff --git a/host/figures/deploy/visit_website.png b/host/figures/deploy/visit_website.png new file mode 100644 index 0000000000000000000000000000000000000000..5cdfb90a1f3c71316fdec9f0d6a78e18cd90851e Binary files /dev/null and b/host/figures/deploy/visit_website.png differ diff --git a/host/figures/deploy/yum_install_go.png b/host/figures/deploy/yum_install_go.png new file mode 100644 index 0000000000000000000000000000000000000000..4eae4fabc664f521db101288c8491e10b4013870 Binary files /dev/null and b/host/figures/deploy/yum_install_go.png differ diff --git a/host/figures/deploy/yum_install_node.png b/host/figures/deploy/yum_install_node.png new file mode 100644 index 0000000000000000000000000000000000000000..b05160f060bec9bd90d951626af88ba6b3fda63b Binary files /dev/null and b/host/figures/deploy/yum_install_node.png differ diff --git a/host/figures/dump_and_mem.png b/host/figures/dump_and_mem.png deleted file mode 100644 index b7e3cc26ca286702c9ca9869fc203aff34a8da39..0000000000000000000000000000000000000000 Binary files a/host/figures/dump_and_mem.png and /dev/null differ diff --git a/host/figures/excutecommand.jpg b/host/figures/excutecommand.jpg deleted file mode 100644 index 08335f77d94cb19252bb4cee92944339b8bab64c..0000000000000000000000000000000000000000 Binary files a/host/figures/excutecommand.jpg and /dev/null differ diff --git a/host/figures/filters.png b/host/figures/filters.png deleted file mode 100644 index a02d9416f08382ff7a03e176e37e6479f5922c08..0000000000000000000000000000000000000000 Binary files a/host/figures/filters.png and /dev/null differ diff --git a/host/figures/hdc/Device.jpg b/host/figures/hdc/Device.jpg new file mode 100644 index 0000000000000000000000000000000000000000..fbb598d131fdedd5584ef9ab42194ffb50d57dfb Binary files /dev/null and b/host/figures/hdc/Device.jpg differ diff --git a/host/figures/hdc/Schedulingdetails.jpg b/host/figures/hdc/Schedulingdetails.jpg new file mode 100644 index 0000000000000000000000000000000000000000..78d9982358133090369cf40e13d11be62622173f Binary files /dev/null and b/host/figures/hdc/Schedulingdetails.jpg differ diff --git a/host/figures/hdc/examplerecord.jpg b/host/figures/hdc/examplerecord.jpg new file mode 100644 index 0000000000000000000000000000000000000000..a3c3ca0a2e4db30149365d7d89f1cf886a0c8d35 Binary files /dev/null and b/host/figures/hdc/examplerecord.jpg differ diff --git a/host/figures/hdc/hdc.jpg b/host/figures/hdc/hdc.jpg new file mode 100644 index 0000000000000000000000000000000000000000..bf8c0e8bfd2ac208214203dd972f3b3821b06d5d Binary files /dev/null and b/host/figures/hdc/hdc.jpg differ diff --git a/host/figures/hdc/hdcfile.jpg b/host/figures/hdc/hdcfile.jpg new file mode 100644 index 0000000000000000000000000000000000000000..d5d56f9abdab6f8ce697daaf82a8c0449f909c82 Binary files /dev/null and b/host/figures/hdc/hdcfile.jpg differ diff --git a/host/figures/hdc/hdctracing.jpg b/host/figures/hdc/hdctracing.jpg new file mode 100644 index 0000000000000000000000000000000000000000..b24d5676213df9dba062bb2be7998296fca28562 Binary files /dev/null and b/host/figures/hdc/hdctracing.jpg differ diff --git a/host/figures/hdc/record.jpg b/host/figures/hdc/record.jpg new file mode 100644 index 0000000000000000000000000000000000000000..bf472ca30f4f8cb33038316f35be692e05eee34d Binary files /dev/null and b/host/figures/hdc/record.jpg differ diff --git a/host/figures/htrace.jpg b/host/figures/htrace.jpg deleted file mode 100644 index 0c3999d31b19b03d6c2471ff80cbcd4d2e7e2177..0000000000000000000000000000000000000000 Binary files a/host/figures/htrace.jpg and /dev/null differ diff --git a/host/figures/log.png b/host/figures/log.png deleted file mode 100644 index dbe3780eb647493dec252d69f23e71cf66ac15a8..0000000000000000000000000000000000000000 Binary files a/host/figures/log.png and /dev/null differ diff --git a/host/figures/mem_usage.png b/host/figures/mem_usage.png deleted file mode 100644 index f4ebd6e272c424d6861e2e8150c72c1f4de9802a..0000000000000000000000000000000000000000 Binary files a/host/figures/mem_usage.png and /dev/null differ diff --git a/host/figures/opentrace.jpg b/host/figures/opentrace.jpg deleted file mode 100644 index c2fcf84c6dea67205d5cd5b6041dad1834631d33..0000000000000000000000000000000000000000 Binary files a/host/figures/opentrace.jpg and /dev/null differ diff --git a/host/figures/process_thread.png b/host/figures/process_thread.png deleted file mode 100644 index abc3867130c10413197482d0156ce0ee00aca255..0000000000000000000000000000000000000000 Binary files a/host/figures/process_thread.png and /dev/null differ diff --git a/host/figures/smaps/smapschart.jpg b/host/figures/smaps/smapschart.jpg new file mode 100644 index 0000000000000000000000000000000000000000..032d543261f85121367fa3f7e260e688b018d815 Binary files /dev/null and b/host/figures/smaps/smapschart.jpg differ diff --git a/host/figures/smaps/smapsexcuting.jpg b/host/figures/smaps/smapsexcuting.jpg new file mode 100644 index 0000000000000000000000000000000000000000..53f86e1472c53801d7d3637ffadae6d493233921 Binary files /dev/null and b/host/figures/smaps/smapsexcuting.jpg differ diff --git a/host/figures/smaps/smapslist.jpg b/host/figures/smaps/smapslist.jpg new file mode 100644 index 0000000000000000000000000000000000000000..598f6a1289980ead2857757d8d7ff513d5a022d9 Binary files /dev/null and b/host/figures/smaps/smapslist.jpg differ diff --git a/host/figures/smaps/smapsrecord.jpg b/host/figures/smaps/smapsrecord.jpg new file mode 100644 index 0000000000000000000000000000000000000000..9380722264bf06e22a1b1231e97eca0f06a0db1f Binary files /dev/null and b/host/figures/smaps/smapsrecord.jpg differ diff --git a/host/figures/smaps/smapssetting.jpg b/host/figures/smaps/smapssetting.jpg new file mode 100644 index 0000000000000000000000000000000000000000..d6d23c4133e2a33662913c931485f0fe2d4fb143 Binary files /dev/null and b/host/figures/smaps/smapssetting.jpg differ diff --git a/host/figures/smaps/smapsstatistics.jpg b/host/figures/smaps/smapsstatistics.jpg new file mode 100644 index 0000000000000000000000000000000000000000..4af1ef5ad619eeb8a0ed024286c868421118c428 Binary files /dev/null and b/host/figures/smaps/smapsstatistics.jpg differ diff --git a/host/figures/smaps/smapssummary.jpg b/host/figures/smaps/smapssummary.jpg new file mode 100644 index 0000000000000000000000000000000000000000..df74018bc3bdfd6bec26d540415e2125e929530a Binary files /dev/null and b/host/figures/smaps/smapssummary.jpg differ diff --git a/host/figures/systraceconfig.jpg b/host/figures/systraceconfig.jpg deleted file mode 100644 index 5436850abf26aaea585049af1908c85d1ce67178..0000000000000000000000000000000000000000 Binary files a/host/figures/systraceconfig.jpg and /dev/null differ diff --git a/host/figures/thread_state.png b/host/figures/thread_state.png deleted file mode 100644 index 186ffb16905c7cfa0178f7c14a0189223f6c9e22..0000000000000000000000000000000000000000 Binary files a/host/figures/thread_state.png and /dev/null differ diff --git a/host/figures/trace.jpg b/host/figures/trace.jpg deleted file mode 100644 index 378dba3e866095c0b1155175d09eeb615b3dbf9a..0000000000000000000000000000000000000000 Binary files a/host/figures/trace.jpg and /dev/null differ diff --git a/host/figures/trace_streamer_stream.png b/host/figures/trace_streamer_stream.png deleted file mode 100644 index d36687d164a32bcb07f8f8bd699f0fb0b37e63bd..0000000000000000000000000000000000000000 Binary files a/host/figures/trace_streamer_stream.png and /dev/null differ diff --git a/host/ide/README_zh.md b/host/ide/README_zh.md index 3f583c19f127775caa1f90c8a14c477483da3835..9c37d74481a86771d6f095ae68af7a343a43e4f3 100644 --- a/host/ide/README_zh.md +++ b/host/ide/README_zh.md @@ -1,93 +1,122 @@ -# SmartPerf 编译指导 +# SmartPerf 编译部署指导文档 ## 1. 编译环境搭建: - 注意:在linux编译环境安装时以root或者其他 sudo 用户身份运行下面的命令 +注意:在linux编译环境安装时以root或者其他 sudo 用户身份运行下面的命令 ### 1.1 node 环境安装: ##### 1.1.1 下载Node js安装包(windows推荐, linux跳过此步骤) - 从网站 下载node js安装包 https://nodejs.org/en/download/current/ +从网站下载node js安装包 https://nodejs.org/en/download/current/ ##### 1.1.2 安装nodejs. -- ubuntu 20.04 与Debian 11系统中, 直接用apt-get安装,命令如下: +- ubuntu 20.04 与Debian 11系统中,直接用apt-get安装,先切换到 root用户下,命令如下(node 版本 >= 16.15.1 npm 版本 >= 8.13.2): ``` - 先切换到 root用户下 sudo su - apt-get update - apt-get install nodejs npm + sudo su + apt-get update + apt-get install nodejs npm ``` +![](../figures/deploy/install_node.png) -- centos 系统中 使用yum 安装，命令如下： + +- centos 系统中使用yum安装，先切换到root用户下,命令如下： ``` - 先切换到 root用户下 sudo su - sudo yum -y install nodejs npm + sudo su + sudo yum -y install nodejs npm ``` +![](../figures/deploy/yum_install_node.png) - windows系统中, 用安装包一路next即可: - 安装完成后运行检查是否安装成功: ``` - node -v - npm -v + node -v + npm -v ``` - 出现版本号就代表安装成功了. - -##### 1.1.3 安装tsc typeScript 编译器 - -- 直接使用npm 安装运行命令: +![](../figures/deploy/check_version.png) + + 出现版本号就代表安装成功了 + +##### 1.1.3 更换npm源 ``` -npm install -g typescript + npm config set registry http://registry.npmmirror.com +``` -备注：如果安装失败可以更换npm源,再次尝试. -验证安装完成: - tsc -v +##### 1.1.4 安装tsc typeScript 编译器 +直接使用npm 安装运行命令: +``` + npm install -g typescript + tsc -v ``` + + 验证安装完成: +![](../figures/deploy/install_tsc.png) + ### 1.2 go 编译环境安装: -- ubuntu 环境下直接使用apt安装: +- ubuntu 环境下直接使用apt安装,以root用户执行(go 版本 >= 1.13.8 ) ``` - apt-get install golang-go + apt-get install golang-go ``` -- centos 系统中 使用yum 安装，命令如下： +![](../figures/deploy/install_golang.png) -``` -先切换到 root用户下 sudo su +- centos系统中使用yum安装，先切换到root用户下,命令如下： - sudo yum -y install go ``` -- windows 系统请自行下载安装包并完成安装。 + sudo su + sudo yum -y install go +``` +![](../figures/deploy/yum_install_go.png) + +- windows 系统下 从 https://golang.google.cn/dl/ 下载安装包, 一路next 完成 安装即可。 - 安装完成后 命令行运行验证是否安装成功： ``` - go version + go version ``` ## 2. 项目编译: #### 2.1 先下载sql.js的二进制包,: - 从如下 https://github.com/sql-js/sql.js/releases/download/v1.6.2/sqljs-all.zip 获取到sql.js的二进制包. - 将压缩包解压后, 将文件放置到项目third-party 目录下. +从如下 https://github.com/sql-js/sql.js/releases/download/v1.6.2/sqljs-all.zip 获取到sql.js的二进制包. +将压缩包解压后, 将文件放置到项目third-party 目录下. + +![](../figures/deploy/third_party.png) #### 2.2 先编译获取trace_streamer 的二进制包: - 参照:smartperf/trace_streamer/compile_trace_streamer.md 编译出wasm 、linux、Windows版本的二进制文件 - 将获取到二进制文件放入到项目bin目录下,如果项目目录中无bin目录 先创建bin目录. - 然后将trace_streamer的二进制文件放入bin目录中. +参照:smartperf/trace_streamer/compile_trace_streamer.md 编译出wasm 、linux、Windows版本的二进制文件 +将获取到二进制文件放入到项目bin目录下,如果项目目录中无bin目录 先创建bin目录. +然后将trace_streamer的二进制文件放入bin目录中. + +![](../figures/deploy/put_bin.png) +![](../figures/deploy/bin_files.png) #### 2.3 代码编译(依赖于上面node环境 和 go环境) - 1) 在项目目录安装项目依赖: +1)在项目目录安装项目依赖: +``` npm install - 2) 在项目目录下运行命令: +``` +2)在项目目录下运行命令: +``` npm run compile +``` +![](../figures/deploy/compile.png) 编译成功后会有main 可执行文件生成 ## 3. 项目部署: - 1. linux 版本部署需要给trace_stream程序赋予执行权限: - cd dist/bin 目录下,执行 chmod +x trace_streamer_* - - 直接运行 ./main 可执行程序,完成项目的部署; + 1. linux 版本部署需要给trace_stream程序赋予执行权限: +cd dist/bin 目录下,执行 +``` + chmod +x trace_streamer_* +``` +![](../figures/deploy/chomd+x.png) +直接运行 ./main 可执行程序,完成项目的部署; +![](../figures/deploy/run_main.png) ## 4. 访问项目: - 在浏览器上打开 https://[部署机器ip地址]:9001/application/ - !!! 注意一定是https. +在浏览器上打开 https://[部署机器ip地址]:9000/application/ +!!! 注意一定是https. + +![](../figures/deploy/visit_website.png) - 备注：如果未出现如图所示网页.而是显示 无法访问此网站 - 可以在window cmd 里执行telnet [部署机器ip地址] 9001 - 如果显示端口连接失败 可能是防火墙未对9001 端口放开即可 + 备注：如果未出现如图所示网页.而是显示 无法访问此网站 +可以在window cmd 里执行telnet [部署机器ip地址] 9000 +如果显示端口连接失败 可能是防火墙未对9000 端口放开即可 \ No newline at end of file diff --git a/host/ide/build.js b/host/ide/build.js index f153f333d4055d508fd83648262996331f2d32a7..a2fd9c5af293e7562bbdd8d38bd2a0fa610194d1 100644 --- a/host/ide/build.js +++ b/host/ide/build.js @@ -24,7 +24,9 @@ const outDir = "dist" const sdkWams = [ "trace_streamer_sdk_builtin.js", - "trace_streamer_sdk_builtin.wasm" + "trace_streamer_sdk_builtin.wasm", + "trace_streamer_dubai_builtin.js", + "trace_streamer_dubai_builtin.wasm" ] const staticPath = [ diff --git a/host/ide/server/wasm.json b/host/ide/server/wasm.json index dc715f822dfc3bf93313f8b27ed46e8a1943d1a6..a02200f7a78dc71e4cb5ba90dec9ba84002bf36d 100644 --- a/host/ide/server/wasm.json +++ b/host/ide/server/wasm.json @@ -13,8 +13,8 @@ "componentId": 1, "pluginName": "dubai-plugin", "sampleInterval": 5000, - "wasmJsName": "trace_streamer_sdk_builtin.js", - "wasmName": "trace_streamer_sdk_builtin_wasm" + "wasmJsName": "trace_streamer_dubai_builtin.js", + "wasmName": "trace_streamer_dubai_builtin_wasm" } ] } \ No newline at end of file diff --git a/host/ide/src/base-ui/button/LitButton.ts b/host/ide/src/base-ui/button/LitButton.ts index 7beacb9351e5b296b082a69fcd193a1751e662d2..ef3db7db0dcf3fa044177b44f310f09e7d603a8f 100644 --- a/host/ide/src/base-ui/button/LitButton.ts +++ b/host/ide/src/base-ui/button/LitButton.ts @@ -104,6 +104,15 @@ export class LitButton extends BaseElement { this.litIcon?.setAttribute("opacity", value); } + set hidden(hidden:boolean) { + if (hidden) { + this.setAttribute('hidden', 'true') + this.style.display = 'none' + } else { + this.removeAttribute('hidden') + this.style.display = 'block' + } + } initHtml(): string { return ` diff --git a/host/ide/src/base-ui/chart/column/LitChartColumn.ts b/host/ide/src/base-ui/chart/column/LitChartColumn.ts new file mode 100644 index 0000000000000000000000000000000000000000..646b623dab50997fc746fbcf0f04e342ca5e4853 --- /dev/null +++ b/host/ide/src/base-ui/chart/column/LitChartColumn.ts @@ -0,0 +1,400 @@ +/* + * Copyright (C) 2022 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import {BaseElement, element} from "../../BaseElement.js"; +import {LitChartColumnConfig} from "./LitChartColumnConfig.js"; +import {resizeCanvas} from "../helper.js"; + +class Pillar { + obj?: any + xLabel?: string + yLabel?: string + type?: string + root?: boolean + bgFrame?: { + x: number + y: number + w: number + h: number + } + frame?: { + x: number + y: number + w: number + h: number + } + height?: number + process?: boolean + heightStep?: number + centerX?: number + centerY?: number + color?: string + hover?: boolean +} + +interface RLine { + label: string + y: number +} + +@element('lit-chart-column') +export class LitChartColumn extends BaseElement { + private tipEL: HTMLDivElement | null | undefined; + canvas: HTMLCanvasElement | undefined | null; + ctx: CanvasRenderingContext2D | undefined | null; + cfg: LitChartColumnConfig | null | undefined; + offset?: { x: number | undefined; y: number | undefined }; + data: Pillar[] = [] + rowLines: RLine[] = [] + + connectedCallback() { + super.connectedCallback(); + this.tipEL = this.shadowRoot!.querySelector("#tip"); + this.canvas = this.shadowRoot!.querySelector("#canvas") + this.ctx = this.canvas!.getContext('2d', {alpha: true}); + resizeCanvas(this.canvas!); + this.offset = {x: 40, y: 20}; + this.canvas!.onmouseout = (e) => { + this.hideTip() + this.data.forEach(it => it.hover = false); + this.render(); + } + this.canvas!.onmouseover = (e) => { + } + this.canvas!.onmousemove = (ev) => { + let rect = this.getBoundingClientRect(); + let x = ev.pageX - rect.left; + let y = ev.pageY - rect.top; + this.data.forEach(it => { + if (contains(it.bgFrame!, x, y)) { + it.hover = true + } else { + it.hover = false; + } + }) + let pillars = this.data.filter(it => it.hover); + if (this.cfg?.seriesField) { + if (pillars.length > 0) { + let title = `` + let msg = pillars.map(it => ``).join("") + let sum = `` + let innerHtml = `
${title}${msg}${sum}
` + if (x >= this.clientWidth - this.tipEL!.clientWidth) { + this.showTip(x - this.tipEL!.clientWidth - 10, y - 20, this.cfg!.tip ? this.cfg!.tip(pillars) : innerHtml) + } else { + this.showTip(x + 10, y - 20, this.cfg!.tip ? this.cfg!.tip(pillars) : innerHtml) + } + } + } else { + if (pillars.length > 0) { + let title = `` + let innerHtml = `
${title}
` + if (x >= this.clientWidth - this.tipEL!.clientWidth) { + this.showTip(x - this.tipEL!.clientWidth - 10, y - 20, this.cfg!.tip ? this.cfg!.tip(pillars) : innerHtml) + } else { + this.showTip(x + 10, y - 20, this.cfg!.tip ? this.cfg!.tip(pillars) : innerHtml) + } + } + } + + if (this.data.filter(it => it.process).length == 0) { + this.render(); + } + } + this.render() + } + + initElements(): void { + new ResizeObserver((entries, observer) => { + entries.forEach(it => { + resizeCanvas(this.canvas!); + this.measure(); + this.render(false); + }) + }).observe(this) + } + + set config(cfg: LitChartColumnConfig | null | undefined) { + if (!cfg) return; + this.cfg = cfg; + this.measure(); + this.render(); + } + + set dataSource(arr:any[]){ + if(this.cfg){ + this.cfg.data = arr; + this.measure(); + this.render(); + } + } + + get dataSource(){ + return this.cfg?.data || [] + } + + measure() { + if (!this.cfg) return; + this.data = [] + this.rowLines = [] + if (!this.cfg.seriesField) { + let maxValue = Math.max(...this.cfg.data.map(it => it[this.cfg!.yField])) + maxValue = Math.ceil(maxValue * 0.1) * 10; + let partWidth = (this.clientWidth - this.offset!.x!) / (this.cfg.data.length) + let partHeight = this.clientHeight - this.offset!.y!; + let gap = partHeight / 5; + let valGap = maxValue / 5; + for (let i = 0; i <= 5; i++) { + this.rowLines.push({ + y: gap * i, + label: `${maxValue - valGap * i} ` + }) + } + this.cfg?.data + .sort((a, b) => b[this.cfg!.yField] - a[this.cfg!.yField]) + .forEach((it, i, array) => { + this.data.push({ + color: this.cfg!.color(it), + obj: it, + root: true, + xLabel: it[this.cfg!.xField], + yLabel: it[this.cfg!.yField], + bgFrame: { + x: this.offset!.x! + partWidth * i, + y: 0, + w: partWidth, + h: partHeight + }, + centerX: this.offset!.x! + partWidth * i + partWidth / 2, + centerY: partHeight - (it[this.cfg!.yField] * partHeight / maxValue) + it[this.cfg!.yField] * partHeight / maxValue / 2, + frame: { + x: this.offset!.x! + partWidth * i + partWidth / 6, + y: partHeight - (it[this.cfg!.yField] * partHeight / maxValue), + w: partWidth - partWidth / 3, + h: it[this.cfg!.yField] * partHeight / maxValue + }, + height: 0, + heightStep: Math.ceil(it[this.cfg!.yField] * partHeight / maxValue / 60), + process: true, + }) + }) + } else { + let reduceGroup = this.cfg.data.reduce((pre, current, index, arr) => { + (pre[current[this.cfg!.xField]] = pre[current[this.cfg!.xField]] || []).push(current); + return pre; + }, {}); + let sums = Reflect.ownKeys(reduceGroup) + .map((k) => (reduceGroup[k] as any[]) + .reduce((pre, current) => pre + current[this.cfg!.yField], 0)) + let maxValue = Math.ceil(Math.max(...sums) * 0.1) * 10; + let partWidth = (this.clientWidth - this.offset!.x!) / (Reflect.ownKeys(reduceGroup).length) + let partHeight = this.clientHeight - this.offset!.y!; + let gap = partHeight / 5; + let valGap = maxValue / 5; + for (let i = 0; i <= 5; i++) { + this.rowLines.push({ + y: gap * i, + label: `${maxValue - valGap * i} ` + }) + } + Reflect.ownKeys(reduceGroup) + .sort((b, a) => (reduceGroup[a] as any[]).reduce((pre,cur)=>pre+(cur[this.cfg!.yField] as number),0) - (reduceGroup[b] as any[]).reduce((pre,cur)=>pre+(cur[this.cfg!.yField] as number),0)) + .forEach((key, i) => { + let elements = reduceGroup[key]; + let initH = 0 + elements.forEach((it: any, y: number) => { + this.data.push({ + color: this.cfg!.color(it), + obj: it, + root: y == 0, + type: it[this.cfg!.seriesField], + xLabel: it[this.cfg!.xField], + yLabel: it[this.cfg!.yField], + bgFrame: { + x: this.offset!.x! + partWidth * i, + y: 0, + w: partWidth, + h: partHeight + }, + centerX: this.offset!.x! + partWidth * i + partWidth / 2, + centerY: partHeight - initH - (it[this.cfg!.yField] * partHeight / maxValue) + it[this.cfg!.yField] * partHeight / maxValue / 2, + frame: { + x: this.offset!.x! + partWidth * i + partWidth / 6, + y: partHeight - (it[this.cfg!.yField] * partHeight / maxValue) - initH, + w: partWidth - partWidth / 3, + h: it[this.cfg!.yField] * partHeight / maxValue + }, + height: 0, + heightStep: Math.ceil(it[this.cfg!.yField] * partHeight / maxValue / 60), + process: true, + }) + initH += it[this.cfg!.yField] * partHeight / maxValue + }) + }) + } + } + + get config(): LitChartColumnConfig | null | undefined { + return this.cfg + } + + render(ease: boolean = true) { + if (!this.canvas || !this.cfg) return; + this.ctx!.clearRect(0, 0, this.clientWidth, this.clientHeight) + this.drawLine(this.ctx!); + this.data?.forEach(it => this.drawColumn(this.ctx!, it, ease)) + if (ease) { + if (this.data.filter(it => it.process).length > 0) { + requestAnimationFrame(() => this.render(ease)) + } + } + } + + drawLine(c: CanvasRenderingContext2D) { + c.strokeStyle = "#dfdfdf" + c.lineWidth = 1; + c.beginPath(); + c.fillStyle = "#8c8c8c" + this.rowLines.forEach((it, i) => { + c.moveTo(this.offset!.x!, it.y); + c.lineTo(this.clientWidth, it.y); + if (i == 0) { + c.fillText(it.label, this.offset!.x! - c.measureText(it.label).width - 2, it.y + 11) + } else { + c.fillText(it.label, this.offset!.x! - c.measureText(it.label).width - 2, it.y + 4) + } + }) + c.stroke(); + c.closePath(); + } + + drawColumn(c: CanvasRenderingContext2D, it: Pillar, ease: boolean) { + if (it.hover) { + c.globalAlpha = 0.2 + c.fillStyle = "#999999"; + c.fillRect(it.bgFrame!.x, it.bgFrame!.y, it.bgFrame!.w, it.bgFrame!.h); + c.globalAlpha = 1.0 + } + c.fillStyle = it.color || "#ff0000"; + if (ease) { + if (it.height! < it.frame!.h) { + it.process = true; + c.fillRect(it.frame!.x, it.frame!.y + (it.frame!.h - it.height!), it.frame!.w, it.height!); + it.height! += it.heightStep!; + } else { + c.fillRect(it.frame!.x, it.frame!.y, it.frame!.w, it.frame!.h); + it.process = false; + } + } else { + c.fillRect(it.frame!.x, it.frame!.y, it.frame!.w, it.frame!.h); + it.process = false; + } + + c.beginPath(); + c.strokeStyle = "#d8d8d8" + c.moveTo(it.centerX!, it.frame!.y + it.frame!.h!) + if (it.root) { + c.lineTo(it.centerX!, it.frame!.y + it.frame!.h + 4) + } + let xMetrics = c.measureText(it.xLabel!); + let xMetricsH = xMetrics.actualBoundingBoxAscent + xMetrics.actualBoundingBoxDescent; + let yMetrics = c.measureText(it.yLabel!); + // let yMetricsH = yMetrics.actualBoundingBoxAscent + yMetrics.actualBoundingBoxDescent; + let yMetricsH = yMetrics.fontBoundingBoxAscent + yMetrics.fontBoundingBoxDescent; + c.fillStyle = "#8c8c8c" + if (it.root) { + c.fillText(it.xLabel!, it.centerX! - xMetrics.width / 2, it.frame!.y + it.frame!.h + 15) + } + c.fillStyle = '#fff'; + if(this.cfg?.label){ + if (yMetricsH < it.frame!.h) { + c.fillText((this.cfg!.label!.content)? (this.cfg!.label!.content(it.obj)):it.yLabel!, it.centerX! - yMetrics.width / 2, it.centerY! + (it.frame!.h - it.height!) / 2) + } + } + c.stroke(); + c.closePath(); + } + + beginPath(stroke: boolean, fill: boolean) { + return (fn: (c: CanvasRenderingContext2D) => void) => { + this.ctx!.beginPath(); + fn?.(this.ctx!); + if (stroke) { + this.ctx!.stroke(); + } + if (fill) { + this.ctx!.fill(); + } + this.ctx!.closePath(); + } + } + + showTip(x: number, y: number, msg: string) { + this.tipEL!.style.display = "flex"; + this.tipEL!.style.top = `${y}px`; + this.tipEL!.style.left = `${x}px`; + this.tipEL!.innerHTML = msg; + } + + hideTip() { + this.tipEL!.style.display = "none"; + } + + initHtml(): string { + return ` + +
+ +
+
`; + } + +} + +function contains(rect: { x: number, y: number, w: number, h: number }, x: number, y: number): boolean { + return rect.x <= x && x <= rect.x + rect.w && rect.y <= y && y <= rect.y + rect.h; +} \ No newline at end of file diff --git a/host/ide/src/base-ui/chart/column/LitChartColumnConfig.ts b/host/ide/src/base-ui/chart/column/LitChartColumnConfig.ts new file mode 100644 index 0000000000000000000000000000000000000000..6ae2130473c2606400ed8c882730e14801f951ee --- /dev/null +++ b/host/ide/src/base-ui/chart/column/LitChartColumnConfig.ts @@ -0,0 +1,29 @@ +/* + * Copyright (C) 2022 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + + +export interface LitChartColumnConfig { + data: any[] + appendPadding: number + xField: string + yField: string + seriesField: string, + color: (a:any)=>string + tip:((a:any)=>string)|undefined + label: ({ + offset: number + content: (it: any) => string + }|undefined|null) +} \ No newline at end of file diff --git a/host/ide/src/base-ui/chart/helper.ts b/host/ide/src/base-ui/chart/helper.ts new file mode 100644 index 0000000000000000000000000000000000000000..48147c7b1a27e1faf141318d10742ec964659c5b --- /dev/null +++ b/host/ide/src/base-ui/chart/helper.ts @@ -0,0 +1,24 @@ +/* + * Copyright (C) 2022 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export const resizeCanvas = (c: HTMLCanvasElement) => { + let el: Element = (c.getRootNode({composed: false}) as ShadowRoot).host; + let dpr = window.devicePixelRatio || 1 + c.width = Math.ceil(el.clientWidth * dpr); + c.height = Math.ceil(el.clientHeight * dpr); + c.style.width = `${el.clientWidth}px`; + c.style.height = `${el.clientHeight}px`; + c.getContext('2d', {alpha: true})?.scale(dpr, dpr); +} \ No newline at end of file diff --git a/host/ide/src/base-ui/chart/pie/LitChartPie.ts b/host/ide/src/base-ui/chart/pie/LitChartPie.ts new file mode 100644 index 0000000000000000000000000000000000000000..31bd0f62004102d16a9de5c666a129964bda395a --- /dev/null +++ b/host/ide/src/base-ui/chart/pie/LitChartPie.ts @@ -0,0 +1,454 @@ +/* + * Copyright (C) 2022 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import {resizeCanvas} from "../helper.js"; +import {BaseElement, element} from "../../BaseElement.js"; +import {LitChartPieConfig} from "./LitChartPieConfig.js"; +import {isPointIsCircle, pieChartColors, randomRgbColor} from "./LitChartPieData.js"; + +interface Rectangle { + x: number + y: number + w: number + h: number +} + +class Sector { + obj?: any + key: any + value: any + startAngle?: number + endAngle?: number + startDegree?: number + endDegree?: number + color?: string + percent?: number + hover?: boolean + ease?: { + initVal?: number + step?: number + process?: boolean + } +} + +@element('lit-chart-pie') +export class LitChartPie extends BaseElement { + private eleShape: Element | null | undefined; + private tipEL: HTMLDivElement | null | undefined; + private labelsEL: HTMLDivElement | null | undefined; + canvas: HTMLCanvasElement | undefined | null; + ctx: CanvasRenderingContext2D | undefined | null; + cfg: LitChartPieConfig | null | undefined; + centerX: number | null | undefined; + centerY: number | null | undefined; + data: Sector[] = [] + radius: number | undefined; + private textRects: Rectangle[] = [] + + set config(cfg: LitChartPieConfig | null | undefined) { + if (!cfg) return; + this.cfg = cfg; + this.measure(); + this.render(); + } + + set dataSource(arr:any[]){ + if(this.cfg){ + this.cfg.data = arr; + this.measure(); + this.render(); + } + } + + measure() { + if (!this.cfg) return; + this.data = [] + this.radius = Math.min(this.clientHeight, this.clientWidth) * 0.65 / 2 - 10 + let cfg = this.cfg!; + let startAngle = 0 + let startDegree = 0; + let full = Math.PI / 180;//每度 + let fullDegree = 0;//每度 + let sum = this.cfg.data.reduce((previousValue, currentValue) => currentValue[cfg.angleField] + previousValue, 0) + this.labelsEL!.textContent = "" + let labelArray: string[] = [] + this.cfg.data.forEach((it,index) => { + let item: Sector = { + color: (this.cfg!.label.color)?(this.cfg!.label.color(it)):pieChartColors[index % pieChartColors.length], + obj: it, + key: it[cfg.colorField], + value: it[cfg.angleField], + startAngle: startAngle, + endAngle: startAngle + full * (it[cfg.angleField] / sum * 360), + startDegree: startDegree, + endDegree: startDegree + fullDegree + (it[cfg.angleField] / sum * 360), + ease: { + initVal: 0, + step: (startAngle + full * (it[cfg.angleField] / sum * 360)) / startDegree, + process: true, + } + } + this.data.push(item) + startAngle += full * (it[cfg.angleField] / sum * 360) + startDegree += fullDegree + (it[cfg.angleField] / sum * 360) + labelArray.push(``) + }) + this.labelsEL!.innerHTML = labelArray.join("") + } + + get config(): LitChartPieConfig | null | undefined { + return this.cfg + } + + connectedCallback() { + super.connectedCallback(); + this.eleShape = this.shadowRoot!.querySelector('#shape'); + this.tipEL = this.shadowRoot!.querySelector("#tip"); + this.labelsEL = this.shadowRoot!.querySelector("#labels"); + this.canvas = this.shadowRoot!.querySelector("#canvas") + this.ctx = this.canvas!.getContext('2d', {alpha: true}); + resizeCanvas(this.canvas!); + this.radius = Math.min(this.clientHeight, this.clientWidth) * 0.65 / 2 - 10; + this.centerX = this.clientWidth / 2 + this.centerY = this.clientHeight / 2 - 40; + this.ctx?.translate(this.centerX, this.centerY) + // this.canvas!.onmouseout = (e) => console.log("onMouseOut", e) + // this.canvas!.onmouseover = (e) => console.log("onMouseOver", e) + //增加点击事件 + this.canvas!.onclick = (ev)=>{ + let rect = this.getBoundingClientRect() + let x = ev.pageX - rect.left - this.centerX!; + let y = ev.pageY - rect.top - this.centerY!; + if (isPointIsCircle(0, 0, x, y, this.radius!)) { + let degree = this.computeDegree(x,y); + this.data.forEach(it => { + if (degree >= it.startDegree! && degree <= it.endDegree!) { + this.config?.angleClick?.(it.obj) + } + }) + } + } + this.canvas!.onmousemove = (ev) => { + let rect = this.getBoundingClientRect() + let x = ev.pageX - rect.left - this.centerX!; + let y = ev.pageY - rect.top - this.centerY!; + if (isPointIsCircle(0, 0, x, y, this.radius!)) { + let degree = this.computeDegree(x,y) + this.data.forEach(it => { + it.hover = degree >= it.startDegree! && degree <= it.endDegree! + if (it.hover) { + this.showTip(ev.pageX - rect.left + 10, ev.pageY - this.offsetTop - 10, this.cfg!.tip?this.cfg!.tip(it):`${it.key}: ${it.value}`); + } + }) + } else { + this.hideTip(); + this.data.forEach(it => it.hover = false); + } + this.render(); + } + this.render() + } + + computeDegree(x:number,y:number){ + let degree = 360 * Math.atan(y / x) / (2 * Math.PI); + if (x >= 0 && y >= 0) { + degree = degree; + } else if (x < 0 && y >= 0) { + degree = 180 + degree; + } else if (x < 0 && y < 0) { + degree = 180 + degree; + } else { + degree = 270 + (90 + degree); + } + return degree; + } + + initElements(): void { + new ResizeObserver((entries, observer) => { + entries.forEach(it => { + resizeCanvas(this.canvas!); + this.centerX = this.clientWidth / 2 + this.centerY = this.clientHeight / 2 - 40; + this.ctx?.translate(this.centerX, this.centerY) + this.measure(); + this.render(); + }) + }).observe(this) + } + + render(ease: boolean = true) { + if (!this.canvas || !this.cfg) return; + if(this.radius!<=0) return; + this.ctx?.clearRect(0 - this.centerX!, 0 - this.centerY!, this.clientWidth, this.clientHeight) + this.data.forEach((it) => { + this.ctx!.beginPath(); + this.ctx!.fillStyle = it.color as string; + this.ctx!.strokeStyle = "#fff"; + this.ctx?.moveTo(0, 0) + if (it.hover) { + this.ctx!.lineWidth = 1; + this.ctx!.arc(0, 0, this.radius!, it.startAngle!, it.endAngle!, false); + } else { + this.ctx!.lineWidth = 1; + if (ease) { + if (it.ease!.initVal! < it.endAngle! - it.startAngle!) { + it.ease!.process = true + this.ctx!.arc(0, 0, this.radius!, it.startAngle!, it.startAngle! + it.ease!.initVal!, false); + it.ease!.initVal! += it.ease!.step! + } else { + it.ease!.process = false + this.ctx!.arc(0, 0, this.radius!, it.startAngle!, it.endAngle!, false); + } + } else { + this.ctx!.arc(0, 0, this.radius!, it.startAngle!, it.endAngle!, false); + } + } + this.ctx?.lineTo(0, 0) + this.ctx?.fill() + this.ctx!.stroke(); + this.ctx?.closePath(); + }) + + this.data.filter(it => it.hover).forEach(it => { + this.ctx!.beginPath(); + this.ctx!.fillStyle = it.color as string; + // this.ctx!.strokeStyle = "#fff"; + this.ctx!.lineWidth = 1; + this.ctx?.moveTo(0, 0) + this.ctx!.arc(0, 0, this.radius!, it.startAngle!, it.endAngle!, false); + this.ctx?.lineTo(0, 0) + // this.ctx!.strokeStyle = window.getComputedStyle(this.eleShape!).backgroundColor;; + this.ctx!.strokeStyle = "#000"; + this.ctx!.stroke(); + this.ctx?.closePath(); + }) + + this.textRects = [] + this.data.forEach(it => { + let text = `${it.value}`; + let metrics = this.ctx!.measureText(text); + let textWidth = metrics.width; + let textHeight = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent; + this.ctx!.beginPath(); + this.ctx!.strokeStyle = it.color!; + this.ctx!.fillStyle = "#595959" + let deg = it.startDegree! + (it.endDegree! - it.startDegree!) / 2; + let dep = 25; + let x1 = 0 + (this.radius!) * Math.cos(deg * Math.PI / 180); + let y1 = 0 + (this.radius!) * Math.sin(deg * Math.PI / 180); + let x2 = 0 + (this.radius! + 13) * Math.cos(deg * Math.PI / 180); + let y2 = 0 + (this.radius! + 13) * Math.sin(deg * Math.PI / 180); + let x3 = 0 + (this.radius! + dep) * Math.cos(deg * Math.PI / 180); + let y3 = 0 + (this.radius! + dep) * Math.sin(deg * Math.PI / 180); + this.ctx!.moveTo(x1, y1); + this.ctx!.lineTo(x2, y2); + this.ctx!.stroke(); + let rect = this.correctRect({ + x: x3 - textWidth / 2, + y: y3 + textHeight / 2, + w: textWidth, + h: textHeight, + }) + this.ctx?.fillText(text, rect.x, rect.y); + this.ctx?.closePath(); + }) + + if (this.data.filter(it => it.ease!.process).length > 0) { + requestAnimationFrame(() => this.render(ease)); + } + } + + correctRect(rect: Rectangle): Rectangle { + if (this.textRects.length == 0) { + this.textRects.push(rect); + return rect + } else { + let rectangles = this.textRects.filter(it => this.intersect(it, rect).cross); + if (rectangles.length == 0) { + this.textRects.push(rect); + return rect; + } else { + let it = rectangles[0]; + let inter = this.intersect(it, rect); + if (inter.direction == "Right") { + rect.x += inter.crossW; + } else if (inter.direction == "Bottom") { + rect.y += inter.crossH; + } else if (inter.direction == "Left") { + rect.x -= inter.crossW; + } else if (inter.direction == "Top") { + rect.y -= inter.crossH; + } else if (inter.direction == "Right-Top") { + rect.y -= inter.crossH; + } else if (inter.direction == "Right-Bottom") { + rect.y += inter.crossH; + } else if (inter.direction == "Left-Top") { + rect.y -= inter.crossH; + } else if (inter.direction == "Left-Bottom") { + rect.y += inter.crossH; + } + this.textRects.push(rect); + return rect; + } + } + } + + intersect(r1: Rectangle, rect: Rectangle): { + cross: boolean, + direction: string, + crossW: number, + crossH: number, + } { + let cross: boolean + let direction: string + let crossW: number; + let crossH: number; + let maxX = r1.x + r1.w > rect.x + rect.w ? r1.x + r1.w : rect.x + rect.w; + let maxY = r1.y + r1.h > rect.y + rect.h ? r1.y + r1.h : rect.y + rect.h; + let minX = r1.x < rect.x ? r1.x : rect.x; + let minY = r1.y < rect.y ? r1.y : rect.y; + if (maxX - minX < rect.w + r1.w && maxY - minY < r1.h + rect.h) { + cross = true; + } else { + cross = false; + } + crossW = Math.abs(maxX - minX - (rect.w + r1.w)) + crossH = Math.abs(maxY - minY - (rect.y + r1.y)) + if (rect.x > r1.x) { //right + if (rect.y > r1.y) { //bottom + direction = "Right-Bottom" + } else if (rect.y == r1.y) {//middle + direction = "Right" + } else { //top + direction = "Right-Top" + } + } else if (rect.x < r1.x) { //left + if (rect.y > r1.y) { //bottom + direction = "Left-Bottom" + } else if (rect.y == r1.y) {//middle + direction = "Left" + } else { //top + direction = "Left-Top" + } + } else { + if (rect.y > r1.y) { //bottom + direction = "Bottom" + } else if (rect.y == r1.y) {//middle + direction = "Right" //superposition default right + } else { //top + direction = "Top" + } + } + return { + cross, direction, crossW, crossH + } + } + + showTip(x: number, y: number, msg: string) { + this.tipEL!.style.display = "flex"; + this.tipEL!.style.top = `${y}px`; + this.tipEL!.style.left = `${x}px`; + this.tipEL!.innerHTML = msg; + } + + hideTip() { + this.tipEL!.style.display = "none"; + } + + initHtml(): string { + return ` + +
+
+ +
+
+
`; + } +} diff --git a/host/ide/src/base-ui/chart/pie/LitChartPieConfig.ts b/host/ide/src/base-ui/chart/pie/LitChartPieConfig.ts new file mode 100644 index 0000000000000000000000000000000000000000..c876bcb816480d45d861a25186b6775a63e238be --- /dev/null +++ b/host/ide/src/base-ui/chart/pie/LitChartPieConfig.ts @@ -0,0 +1,37 @@ +/* + * Copyright (C) 2022 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export interface LitChartPieConfig { + appendPadding: number + data: any[] + angleField: string + colorField: string + radius: number + angleClick?:(it:object) => void + label: { + type: string // spider|inner|outer + offset?: string + content?: (it: object) => string + color?: (it: object) => string + style?: { + fontSize: number + textAlign: string + } + } + tip:((a:any)=>string)|undefined + interactions: { + type: string //element-active | element-selected + }[] +} \ No newline at end of file diff --git a/host/ide/src/base-ui/chart/pie/LitChartPieData.ts b/host/ide/src/base-ui/chart/pie/LitChartPieData.ts new file mode 100644 index 0000000000000000000000000000000000000000..ec614da4f2b24107c7cc2a0d4e8b0aead0d516cd --- /dev/null +++ b/host/ide/src/base-ui/chart/pie/LitChartPieData.ts @@ -0,0 +1,50 @@ +/* + * Copyright (C) 2022 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export function randomRgbColor() { + const letters = '0123456789ABCDEF'; + let color = '#'; + for (let i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)] + } + return color; +} + +export function isPointIsCircle(x1:number,y1:number,x2:number,y2:number,radius:number):boolean { + return Math.sqrt(Math.pow(Math.abs(x2 - x1), 2) + Math.pow(Math.abs(y2 - y1), 2)) + :host{ + display: flex; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 100%; + height: 100%; + overflow: hidden; + z-index: 2001; + pointer-events: none; + } + :host([mask]) .bg{ + position:absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + width: 100%; + height: 100%; + background-color: #00000055; + } + :host(:not([mask])) .bg{ + display: none; + } + + + .title{ + display: flex; + justify-content: space-between; + align-items: center; + padding: 12px 20px; + border-bottom: var(--dark-border1,#f0f0f0) 1px solid; + font-size: 18px; + font-weight: bold; + color: var(--dark-color1,#262626); + } + slot{ + padding: ${this.contentPadding}; + display: block; + } + :host([visible]) .bg{ + transition: all .3s; + opacity: 1; + visibility: visible; + } + :host(:not([visible])) .bg{ + transition: all .3s; + opacity: 0; + visibility: hidden; + } + /* + right（默认） + */ + :host(:not([placement])) .drawer, + :host([placement='right']) .drawer{ + width: ${this.contentWidth}; + box-sizing: border-box; + position: absolute; + display: flex; + flex-direction: column; + right: 0px; + top: 0px; + bottom: 0px; + height: 100%; + overflow: auto; + background-color: var(--dark-background,#FFFFFF); + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -ms-transform: translateZ(0); + -o-transform: translateZ(0); + transform: translateZ(0); + transform: translateX(100%); + transition: transform .3s; + } + :host(:not([placement])[visible]) .drawer, + :host([placement='right'][visible]) .drawer{ + transform: translateX(0%); + box-shadow: 0px 0 20px 0px #00000055; + } + :host(:not([visible]):not([placement])) .drawer, + :host(:not([visible])[placement='right']) .drawer{ + transform: translateX(100%); + } + /* + 左边 + */ + :host([placement='left']) .drawer{ + width: ${this.contentWidth}; + box-sizing: border-box; + position: absolute; + display: flex; + flex-direction: column; + left: 0px; + top: 0px; + bottom: 0px; + right: auto; + height: 100%; + background-color: var(--dark-background,#FFFFFF); + webkit-transform: translate3d(0,0,0); + -moz-transform: translate3d(0,0,0); + -ms-transform: translate3d(0,0,0); + -o-transform: translate3d(0,0,0); + transform: translate3d(0,0,0); + transform: translate(0%,0%); + } + :host([placement='left']) .drawer{ + transition: transform .3s; + } + :host([placement='left'][visible]) .drawer{ + box-shadow: 0px 0 60px 0px #00000055; + transform: translate(0%,0%); + } + :host(:not([visible])[placement='left']) .drawer{ + transform: translate(-100%,0%); + } + + /* + top + */ + :host([placement='top']) .drawer{ + box-sizing: border-box; + position: absolute; + display: flex; + flex-direction: column; + left: 0px; + top: 0px; + right: 0px; + width: 100%; + background-color: var(--dark-background,#FFFFFF); + webkit-transform: translate3d(0,0,0); + -moz-transform: translate3d(0,0,0); + -ms-transform: translate3d(0,0,0); + -o-transform: translate3d(0,0,0); + transform: translate3d(0,0,0); + } + :host([placement='top']) .drawer{ + transform: translateY(-100%); + transition: transform .3s; + } + :host([placement='top'][visible]) .drawer{ + box-shadow: 0px 0 60px 0px #00000055; + transform: translateY(0%); + } + :host(:not([visible])[placement='top']) .drawer{ + transform: translateY(-100%); + } + + /* + bottom + */ + :host([placement='bottom']) .drawer{ + box-sizing: border-box; + position: absolute; + display: flex; + flex-direction: column; + left: 0px; + bottom: 0px; + right: 0px; + top: auto; + width: 100%; + background-color: var(--dark-background,#FFFFFF); + webkit-transform: translate3d(0,0,0); + -moz-transform: translate3d(0,0,0); + -ms-transform: translate3d(0,0,0); + -o-transform: translate3d(0,0,0); + transform: translate3d(0,0,0); + transform: translate(0%,0%); + transition: transform .3s; + } + :host([placement='bottom'][visible]) .drawer{ + box-shadow: 0px 0 60px 0px #00000055; + transform: translate(0%,0%); + } + :host(:not([visible])[placement='bottom']) .drawer{ + transform: translate(0%,100%); + } + + :host([closeable]) .close-icon{ + display: flex; + color: #8c8c8c; + padding: 5px; + } + :host([closeable]) .close-icon:hover{ + color: #414141; + } + :host(:not([closeable])) .close-icon{ + display: none; + } + +
+
+
+ + +
+
+ +
+
+ ` + } + get contentWidth(){ + return this.getAttribute('content-width')||'400px'; + } + set contentWidth(value){ + this.shadowRoot!.querySelector(".drawer")!.style.width = value; + this.setAttribute('content-width', value); + } + get contentPadding(){ + return this.getAttribute('content-padding')||'20px'; + } + set contentPadding(value){ + this.shadowRoot!.querySelector("slot")!.style.padding = value; + this.setAttribute('content-padding', value); + } + get placement(){ + return this.getAttribute('placement') + } + set placement(value: any){ + this.setAttribute('placement', value); + } + get title(){ + return this.getAttribute('title')||'' + } + set title(value){ + this.shadowRoot!.querySelector("#drawer-tittle-text")!.textContent = value; + this.setAttribute('title', value); + } + get visible(){ + return this.getAttribute('visible')!==null; + } + set visible(value: any) { + if(value){ + this.setAttribute('visible',value) + }else{ + this.removeAttribute('visible') + } + } + get mask(){ + return this.getAttribute('mask')!==null + } + set mask(value) { + if (value) { + this.setAttribute('mask',''); + }else{ + this.removeAttribute('mask') + } + } + get maskCloseable(){ + return this.getAttribute('mask-closeable')!==null; + } + set maskCloseable(value){ + if (value) { + this.setAttribute('mask-closeable',''); + }else{ + this.removeAttribute('mask-closeable') + } + } + get closeable(){ + return this.getAttribute('closeable')!==null + } + + set closeable(value) { + if (value) { + this.setAttribute('closeable',''); + }else{ + this.removeAttribute('closeable') + } + } + + + //当 custom element首次被插入文档DOM时，被调用。 + initElements():void { + let bg:HTMLDivElement|null = this.shadowRoot!.querySelector('.bg'); + if (this.maskCloseable) { + bg!.onclick=(e:any)=>{ + e.stopPropagation(); + this.visible=false; + this.dispatchEvent(new CustomEvent('onClose',e)); + } + } + if(this.closeable){ + (this.shadowRoot!.querySelector('.close-icon') as any).onclick=(e:any)=>{ + this.visible=false; + this.dispatchEvent(new CustomEvent('onClose',e)); + }; + } + } + set onClose(fn:any){ + this.addEventListener('onClose', fn); + } + //当 custom element从文档DOM中删除时，被调用。 + disconnectedCallback() { + + } + + //当 custom element被移动到新的文档时，被调用。 + adoptedCallback() { + console.log('Custom square element moved to new page.'); + } + + //当 custom element增加、删除、修改自身属性时，被调用。 + attributeChangedCallback(name: string, oldValue: string, newValue: string) { + if(this.mask){ + if(name==='visible'){ + if (newValue!==null){ + this.style.pointerEvents = 'all'; + }else{ + this.style.pointerEvents = 'none'; + } + }else if(name==='placement'){ + // console.log(newValue); + if (newValue==='bottom'){ + let el = this.shadowRoot!.querySelector('.drawer'); + // el.style.left='0px'; + // el.style.bottom='0px'; + // el.style.right='0px'; + // el.style.top = 'auto'; + // el.style.width = '100%'; + } + } + } + } +} + +if (!customElements.get('lit-drawer')) { + customElements.define('lit-drawer', LitDrawer); +} diff --git a/host/ide/src/base-ui/modal/LitModal.ts b/host/ide/src/base-ui/modal/LitModal.ts new file mode 100644 index 0000000000000000000000000000000000000000..0a7cee9d6ef3a6541a197c8412dfd40af37d60af --- /dev/null +++ b/host/ide/src/base-ui/modal/LitModal.ts @@ -0,0 +1,490 @@ +/* + * Copyright (C) 2022 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import {BaseElement,element} from "../BaseElement.js"; + +@element('lit-modal') +export class LitModal extends BaseElement { + private headerTitleElement: HTMLElement | null | undefined; + private headerElement: HTMLElement | null | undefined; + private closeElement: HTMLElement | null | undefined; + private cancelElement: HTMLElement | null | undefined; + private okElement: HTMLElement | null | undefined; + private modalElement: HTMLElement | null | undefined; + private resizing: boolean = false; + private down: boolean = false; + private onmouseleaveMoveFunc:any; + private onmouseupFunc:any; + private onmousedownMoveFunc:any; + private onmousedownFunc:any; + private onmousemoveMoveFunc:any; + private onmousemoveFunc:any; + private onmouseupMoveFunc:any; + static get observedAttributes() { + return [ + 'title',//标题 + 'line',//body的线条 + 'visible',//是否显示modal窗口 + 'ok-text',//确定文本 + 'cancel-text',//取消文本 + 'moveable',//设置窗口是否可以鼠标拖动 + 'resizeable',//窗口可改变大小 + 'width'//modal宽度 + ] + } + + get okText() { + return this.getAttribute('ok-text') || "确定"; + } + + set okText(value) { + this.setAttribute('ok-text', value); + } + + get cancelText() { + return this.getAttribute('cancel-text') || "取消"; + } + + set cancelText(value) { + this.setAttribute('cancel-text', value); + } + + get title() { + return this.getAttribute('title') || "" + } + + set title(value) { + this.setAttribute('title', value); + } + + get visible() { + return this.hasAttribute('visible'); + } + + set visible(value) { + if (value) { + this.setAttribute('visible', ''); + } else { + this.removeAttribute('visible'); + } + } + + get width() { + return this.getAttribute('width') || "500px"; + } + + set width(value) { + this.setAttribute('width', value); + } + + get resizeable() { + return this.hasAttribute('resizeable'); + } + + set resizeable(value) { + if (value) { + this.setAttribute('resizeable', ''); + } else { + this.removeAttribute('resizeable'); + } + } + + get moveable() { + return this.hasAttribute('moveable'); + } + + set moveable(value) { + if (value) { + this.setAttribute('moveable', ''); + } else { + this.removeAttribute('moveable'); + } + } + + set onOk(fn:any) { + this.addEventListener('onOk', fn); + } + + set onCancel(fn:any) { + this.addEventListener('onCancel', fn); + } + + initHtml(): string { + return ` + +
+
+ + +
+
+ +
+ +
+ ${this.cancelText} + ${this.okText} +
+ +
+ ` + } + + //当 custom element首次被插入文档DOM时，被调用。 + initElements():void { + this.headerTitleElement = this.shadowRoot!.querySelector("#modal-title"); + this.headerTitleElement!.textContent = this.title; + + this.headerElement = this.shadowRoot!.querySelector('.header'); + this.closeElement = this.shadowRoot!.querySelector('.close-icon'); + this.cancelElement = this.shadowRoot!.querySelector('#cancel'); + this.okElement = this.shadowRoot!.querySelector('#ok'); + this.closeElement!.onclick = ev => this.visible = false; + this.modalElement = this.shadowRoot!.querySelector(".modal") + this.shadowRoot!.querySelector('.modal')!.onclick = e => { + e.stopPropagation(); + } + this.onclick = ev => { + ev.stopPropagation(); + if (!this.resizeable) { + this.visible = false; + } + } + this.cancelElement!.onclick = ev => { + this.dispatchEvent(new CustomEvent('onCancel', ev)) + } + this.okElement!.onclick = ev => { + this.dispatchEvent(new CustomEvent('onOk', ev)) + } + if (this.moveable || this.resizeable) { + if (this.resizeable) { + //move + let resizeWidth = 8; + this.resizing = false; + let srcResizeClientX = 0, srcResizeClientY = 0, srcResizeRect, srcResizeHeight = 0, srcResizeWidth = 0, srcResizeRight = 0, srcResizeLeft = 0, srcResizeTop = 0; + let direction:string; + this.onmousemoveFunc = (e:any) => { + e.stopPropagation(); + srcResizeRect = this.modalElement!.getBoundingClientRect(); + if (e.clientX > srcResizeRect.left - resizeWidth && e.clientX < srcResizeRect.left + resizeWidth && e.clientY > srcResizeRect.top - resizeWidth && e.clientY < srcResizeRect.top + resizeWidth) {//left top + this.style.cursor = 'nwse-resize'; + if (!this.resizing) direction = 'left-top' + } else if (e.clientX > srcResizeRect.right - resizeWidth && e.clientX < srcResizeRect.right + resizeWidth && e.clientY > srcResizeRect.top - resizeWidth && e.clientY < srcResizeRect.top + resizeWidth) {//right top + this.style.cursor = 'nesw-resize'; + if (!this.resizing) direction = 'right-top' + } else if (e.clientX > srcResizeRect.left - resizeWidth && e.clientX < srcResizeRect.left + resizeWidth && e.clientY > srcResizeRect.bottom - resizeWidth && e.clientY < srcResizeRect.bottom + resizeWidth) {//left bottom + this.style.cursor = 'nesw-resize'; + if (!this.resizing) direction = 'left-bottom' + } else if (e.clientX > srcResizeRect.right - resizeWidth && e.clientX < srcResizeRect.right + resizeWidth && e.clientY > srcResizeRect.bottom - resizeWidth && e.clientY < srcResizeRect.bottom + resizeWidth) {//right bottom + this.style.cursor = 'nwse-resize'; + if (!this.resizing) direction = 'right-bottom' + } else if (e.clientX > srcResizeRect.left - resizeWidth && e.clientX < srcResizeRect.left + resizeWidth) {//left + this.style.cursor = 'ew-resize'; + if (!this.resizing) direction = 'left' + } else if (e.clientX < srcResizeRect.right + resizeWidth && e.clientX > srcResizeRect.right - resizeWidth) {//right + this.style.cursor = 'ew-resize'; + if (!this.resizing) direction = 'right' + } else if (e.clientY > srcResizeRect.top - resizeWidth && e.clientY < srcResizeRect.top + resizeWidth) {//top + this.style.cursor = 'ns-resize'; + if (!this.resizing) direction = 'top' + } else if (e.clientY < srcResizeRect.bottom + resizeWidth && e.clientY > srcResizeRect.bottom - resizeWidth) {//bottom + this.style.cursor = 'ns-resize'; + if (!this.resizing) direction = 'bottom' + } else { + this.style.cursor = ''; + if (!this.resizing) direction = '' + } + if (this.resizing) { + let offsetResizeY = e.clientY - srcResizeClientY; + let offsetResizeX = e.clientX - srcResizeClientX; + if (direction === 'bottom') { + this.modalElement!.style.height = srcResizeHeight + offsetResizeY + 'px'; + } else if (direction === 'top') { + this.modalElement!.style.top = srcResizeTop + offsetResizeY + 'px'; + this.modalElement!.style.height = srcResizeHeight - offsetResizeY + 'px'; + } else if (direction === 'right') { + this.modalElement!.style.left = srcResizeLeft + srcResizeWidth / 2 + offsetResizeX / 2 + 'px'; + this.modalElement!.style.width = srcResizeWidth + offsetResizeX + 'px'; + } else if (direction === 'left') { + this.modalElement!.style.left = srcResizeLeft + srcResizeWidth / 2 + offsetResizeX / 2 + 'px'; + this.modalElement!.style.width = srcResizeWidth - offsetResizeX + 'px'; + } else if (direction === 'left-top') { + this.modalElement!.style.left = srcResizeLeft + srcResizeWidth / 2 + offsetResizeX / 2 + 'px'; + this.modalElement!.style.width = srcResizeWidth - offsetResizeX + 'px'; + this.modalElement!.style.top = srcResizeTop + offsetResizeY + 'px'; + this.modalElement!.style.height = srcResizeHeight - offsetResizeY + 'px'; + } else if (direction === 'right-top') { + this.modalElement!.style.left = srcResizeLeft + srcResizeWidth / 2 + offsetResizeX / 2 + 'px'; + this.modalElement!.style.width = srcResizeWidth + offsetResizeX + 'px'; + this.modalElement!.style.top = srcResizeTop + offsetResizeY + 'px'; + this.modalElement!.style.height = srcResizeHeight - offsetResizeY + 'px'; + } else if (direction === 'left-bottom') { + this.modalElement!.style.left = srcResizeLeft + srcResizeWidth / 2 + offsetResizeX / 2 + 'px'; + this.modalElement!.style.width = srcResizeWidth - offsetResizeX + 'px'; + this.modalElement!.style.height = srcResizeHeight + offsetResizeY + 'px'; + } else if (direction === 'right-bottom') { + this.modalElement!.style.left = srcResizeLeft + srcResizeWidth / 2 + offsetResizeX / 2 + 'px'; + this.modalElement!.style.width = srcResizeWidth + offsetResizeX + 'px'; + this.modalElement!.style.height = srcResizeHeight + offsetResizeY + 'px'; + } + } + } + this.onmousedownFunc = (e:any) => { + srcResizeRect = this.modalElement!.getBoundingClientRect(); + srcResizeClientX = e.clientX; + srcResizeClientY = e.clientY; + srcResizeHeight = srcResizeRect.height; + srcResizeWidth = srcResizeRect.width; + srcResizeRight = srcResizeRect.right; + srcResizeLeft = srcResizeRect.left; + srcResizeTop = srcResizeRect.top; + if (e.clientX > srcResizeRect.left - resizeWidth && e.clientX < srcResizeRect.left + resizeWidth && e.clientY > srcResizeRect.top - resizeWidth && e.clientY < srcResizeRect.top + resizeWidth) {//left top + this.resizing = true; + } else if (e.clientX > srcResizeRect.right - resizeWidth && e.clientX < srcResizeRect.right + resizeWidth && e.clientY > srcResizeRect.top - resizeWidth && e.clientY < srcResizeRect.top + resizeWidth) {//right top + this.resizing = true; + } else if (e.clientX > srcResizeRect.left - resizeWidth && e.clientX < srcResizeRect.left + resizeWidth && e.clientY > srcResizeRect.bottom - resizeWidth && e.clientY < srcResizeRect.bottom + resizeWidth) {//left bottom + this.resizing = true; + } else if (e.clientX > srcResizeRect.right - resizeWidth && e.clientX < srcResizeRect.right + resizeWidth && e.clientY > srcResizeRect.bottom - resizeWidth && e.clientY < srcResizeRect.bottom + resizeWidth) {//right bottom + this.resizing = true; + } else if (e.clientX > srcResizeRect.left - resizeWidth && e.clientX < srcResizeRect.left + resizeWidth) {//left + this.resizing = true; + } else if (e.clientX < srcResizeRect.right + resizeWidth && e.clientX > srcResizeRect.right - resizeWidth) {//right + this.resizing = true; + } else if (e.clientY > srcResizeRect.top - resizeWidth && e.clientY < srcResizeRect.top + resizeWidth) {//top + this.resizing = true; + } else if (e.clientY < srcResizeRect.bottom + resizeWidth && e.clientY > srcResizeRect.bottom - resizeWidth) {//bottom + this.resizing = true; + } else { + this.resizing = false; + } + if(this.resizing) document.body.style.userSelect = 'none'; + } + this.onmouseupFunc = (e:any) => { + this.resizing = false; + + } + } + + + if (this.moveable) { + this.down = false; + let srcClientX = 0; + let srcClientY = 0; + let srcLeft = 0; + let srcTop = 0; + let srcRight = 0; + let srcBottom = 0; + let clientRect; + let rootRect:any; + + this.onmousedownMoveFunc = (e:any) => { + if(this.resizing) return; + // console.log('鼠标按下', this.down); + srcClientX = e.clientX; + srcClientY = e.clientY; + rootRect = this.getBoundingClientRect(); + clientRect = this.modalElement!.getBoundingClientRect(); + srcLeft = clientRect.left; + srcRight = clientRect.right; + srcTop = clientRect.top; + srcBottom = clientRect.bottom; + if (e.clientX > srcLeft + 10 && e.clientX < srcRight - 10 && e.clientY > srcTop + 10 && e.clientY< srcTop+this.headerElement!.scrollHeight) { + this.down = true; + }else{ + this.down =false; + } + if(this.down) document.body.style.userSelect = 'none'; + this.onmousemoveMoveFunc = (ev:any) => { + + if (this.down) { + let offsetY = e.clientY - srcClientY; + let offsetX = e.clientX - srcClientX; + if (e.clientX > srcLeft + 10 && e.clientX < srcRight - 10 && e.clientY > srcTop + 10) { + this.headerElement!.style.cursor = 'move'; + clientRect = this.modalElement!.getBoundingClientRect(); + //下面 rootRect.height 改成 this.scrollHeight 解决modal 过长会出现滚动条的情况 + if (ev.clientY - srcClientY + srcTop > 0 && ev.clientY - srcClientY + srcTop < this.scrollHeight - clientRect.height) { + this.modalElement!.style.top = ev.clientY - srcClientY + srcTop + 'px'; + } else { + if (ev.clientY - srcClientY + srcTop <= 0) { + this.modalElement!.style.top = '0px'; + } else { + //下面 rootRect.height 改成 this.scrollHeight 解决modal 过长会出现滚动条的情况 + this.modalElement!.style.top = this.scrollHeight - clientRect.height + 'px'; + } + } + //ev.clientX-srcClientX 鼠标移动像素 + if (ev.clientX - srcClientX + srcLeft > 0 && ev.clientX - srcClientX + srcLeft < rootRect.width - clientRect.width) { + this.modalElement!.style.left = ev.clientX - srcClientX + srcLeft + clientRect.width / 2 + 'px'; + } else { + if (ev.clientX - srcClientX + srcLeft <= 0) { + this.modalElement!.style.left = clientRect.width / 2 + 'px'; + } else { + this.modalElement!.style.left = rootRect.width - clientRect.width + clientRect.width / 2 + 'px'; + } + } + } + // console.log(ev.clientX-srcClientX+srcLeft,rootRect.width-clientRect.width); + } + } + this.onmouseleaveMoveFunc = this.onmouseupMoveFunc = (e:any) => { + this.down = false; + this.headerElement!.style.cursor = ''; + } + } + + } + this.onmousemove = (e)=>{ + if(this.onmousemoveFunc)this.onmousemoveFunc(e); + if(this.onmousemoveMoveFunc)this.onmousemoveMoveFunc(e); + } + this.onmousedown = (e)=>{ + if(this.onmousedownFunc)this.onmousedownFunc(e); + if(this.onmousedownMoveFunc)this.onmousedownMoveFunc(e); + } + this.onmouseleave =this.onmouseup = (e)=>{ + if(this.onmouseleaveMoveFunc)this.onmouseleaveMoveFunc(e) + if(this.onmouseupFunc)this.onmouseupFunc(e); + document.body.style.userSelect = ''; + } + } + + } + + //当 custom element从文档DOM中删除时，被调用。 + disconnectedCallback() { + + } + + //当 custom element被移动到新的文档时，被调用。 + adoptedCallback() { + console.log('Custom square element moved to new page.'); + } + + //当 custom element增加、删除、修改自身属性时，被调用。 + attributeChangedCallback(name:string, oldValue:string, newValue:string) { + if (name === 'visible') { + if (!newValue && this.modalElement) { + this.modalElement.style.top = '100px'; + this.modalElement.style.left = '50%'; + } + }else if(name==="title"&&this.headerTitleElement){ + this.headerTitleElement.textContent = newValue; + } + } +} + +if (!customElements.get('lit-modal')) { + customElements.define('lit-modal', LitModal); +} diff --git a/host/ide/src/base-ui/table/lit-table.ts b/host/ide/src/base-ui/table/lit-table.ts index e1c7ba7e77bfdeb3e174ff81070fb9dd125b4c85..035ac8e3373420ea4cefa5df525297599e916cf7 100644 --- a/host/ide/src/base-ui/table/lit-table.ts +++ b/host/ide/src/base-ui/table/lit-table.ts @@ -17,6 +17,7 @@ import {LitTableColumn} from "./lit-table-column.js"; import {element} from "../BaseElement.js"; import "../utils/Template.js" import {TableRowObject} from "./TableRowObject.js"; +import {ExcelFormater} from "../utils/ExcelFormater.js"; @element('lit-table') export class LitTable extends HTMLElement { @@ -49,6 +50,7 @@ export class LitTable extends HTMLElement { display: grid; grid-template-columns: repeat(1,1fr); width: 100%; + position: relative; font-weight: 500; flex:1; } @@ -207,19 +209,30 @@ export class LitTable extends HTMLElement { background-color: var(--dark-background6,#DEEDFF); } .export{ - width:30px; - height:30px; + height:40px; + width: 40px; cursor:pointer; + display:none; color:var(--dark-background6,#262626); + border-radius:40px; + border: 1px solid var(--dark-background6,#262626); box-sizing: border-box; - position:fixed; - right:30px; - bottom:15px; + position:absolute; + right:40px; + bottom:30px; + z-index: 9999999; + } + :host([download]) .export{ + display: flex; + align-items:center; + justify-content:center; } +
+
@@ -234,6 +247,18 @@ export class LitTable extends HTMLElement { return ['scroll-y', 'selectable', 'no-head', 'grid-line', 'defaultOrderColumn'] } + get download() { + return this.hasAttribute('download'); + } + + set download(value) { + if (value) { + this.setAttribute('download', ''); + } else { + this.removeAttribute('download'); + } + } + get selectable() { return this.hasAttribute('selectable'); } @@ -313,11 +338,15 @@ export class LitTable extends HTMLElement { } exportData() { - let formatData: any[] = this.formatExportData(this.ds) - let link = document.createElement('a') - link.download = new Date().getTime() + '.json' - link.href = 'data:text/plain,' + JSON.stringify(formatData, null, 4) - link.click() + let date = new Date(); + let list = [ + { + columns:this.columns as any[], + tables:this.ds, + sheetName:date.getTime()+"" + } + ] + ExcelFormater.testExport(list,date.getTime()+"") } formatExportData(dataSource: any[]): any[] { @@ -346,6 +375,42 @@ export class LitTable extends HTMLElement { }) } + formatExportCsvData(dataSource: any[]): string{ + if (dataSource == undefined || dataSource.length == 0) { + return "" + } + if (this.columns == undefined) { + return "" + } + let str = "" + str+=this.columns!.map((column) => { + let dataIndex = column.getAttribute('data-index') + let columnName = column.getAttribute('title') + if (columnName == "") { + columnName = dataIndex + } + return columnName + }).join(",") + str+=this.recursionExportTableData(this.columns,dataSource) + return str + } + + recursionExportTableData(columns:any[],dataSource: any[]):string{ + let concatStr = "\r\n" + dataSource.forEach((item,index)=>{ + concatStr+=columns.map((column)=>{ + let dataIndex = column.getAttribute('data-index') + return `"${item[dataIndex]||''}" ` + }).join(",") + if(item.children!=undefined){ + concatStr+=this.recursionExportTableData(columns,item.children) + } + if(index!=dataSource.length -1){ + concatStr+="\r\n" + } + }) + return concatStr + } //当 custom element首次被插入文档DOM时，被调用。 connectedCallback() { @@ -356,6 +421,7 @@ export class LitTable extends HTMLElement { this.tbodyElement = this.shadowRoot?.querySelector('.body'); this.tableColumns = this.querySelectorAll('lit-table-column'); this.colCount = this.tableColumns!.length; + this.dataExportInit() this.tableElement?.addEventListener("copy",(e)=>{ // @ts-ignore let clipboardData = e.clipboardData || window.clipboardData; @@ -443,24 +509,24 @@ export class LitTable extends HTMLElement { let NS = "http://www.w3.org/2000/svg"; let upSvg: any = document.createElementNS(NS, "svg"); let upPath: any = document.createElementNS(NS, "path"); - upSvg.setAttribute('fill', 'var(--dark-color1,#212121)'); + upSvg.setAttribute('fill', 'let(--dark-color1,#212121)'); upSvg.setAttribute('viewBox', '0 0 1024 1024'); - upSvg.setAttribute('stroke', 'var(--dark-color1,#212121)'); + upSvg.setAttribute('stroke', 'let(--dark-color1,#212121)'); upSvg.classList.add('up-svg'); upPath.setAttribute("d", "M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"); upSvg.appendChild(upPath); let downSvg: any = document.createElementNS(NS, "svg"); let downPath: any = document.createElementNS(NS, "path"); - downSvg.setAttribute('fill', 'var(--dark-color1,#212121)'); + downSvg.setAttribute('fill', 'let(--dark-color1,#212121)'); downSvg.setAttribute('viewBox', '0 0 1024 1024'); - downSvg.setAttribute('stroke', 'var(--dark-color1,#212121)'); + downSvg.setAttribute('stroke', 'let(--dark-color1,#212121)'); downSvg.classList.add('down-svg'); downPath.setAttribute("d", "M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"); downSvg.appendChild(downPath) if (i == 0) { h.sortType = 0; // 默认以第一列 降序排序 作为默认排序 - upSvg.setAttribute('fill', 'var(--dark-color1,#212121)'); - downSvg.setAttribute('fill', 'var(--dark-color1,#212121)'); + upSvg.setAttribute('fill', 'let(--dark-color1,#212121)'); + downSvg.setAttribute('fill', 'let(--dark-color1,#212121)'); } upSvg.style.display = 'none'; downSvg.style.display = 'none'; @@ -468,7 +534,7 @@ export class LitTable extends HTMLElement { h.appendChild(downSvg); h.onclick = () => { this?.shadowRoot?.querySelectorAll('.td-order svg').forEach((it: any) => { - it.setAttribute('fill', 'var(--dark-color1,#212121)'); + it.setAttribute('fill', 'let(--dark-color1,#212121)'); it.sortType = 0; it.style.display = 'none'; }) @@ -481,20 +547,20 @@ export class LitTable extends HTMLElement { } switch (h.sortType) { case 1: - upSvg.setAttribute('fill', 'var(--dark-color1,#212121)'); - downSvg.setAttribute('fill', 'var(--dark-color1,#212121)'); + upSvg.setAttribute('fill', 'let(--dark-color1,#212121)'); + downSvg.setAttribute('fill', 'let(--dark-color1,#212121)'); upSvg.style.display = 'block'; downSvg.style.display = 'none'; break; case 2: - upSvg.setAttribute('fill', 'var(--dark-color1,#212121)'); - downSvg.setAttribute('fill', 'var(--dark-color1,#212121)'); + upSvg.setAttribute('fill', 'let(--dark-color1,#212121)'); + downSvg.setAttribute('fill', 'let(--dark-color1,#212121)'); upSvg.style.display = 'none'; downSvg.style.display = 'block'; break; default: - upSvg.setAttribute('fill', "var(--dark-color1,#212121)"); - downSvg.setAttribute('fill', "var(--dark-color1,#212121)"); + upSvg.setAttribute('fill', "let(--dark-color1,#212121)"); + downSvg.setAttribute('fill', "let(--dark-color1,#212121)"); upSvg.style.display = 'none'; downSvg.style.display = 'none'; break; diff --git a/host/ide/src/base-ui/utils/ExcelFormater.ts b/host/ide/src/base-ui/utils/ExcelFormater.ts new file mode 100644 index 0000000000000000000000000000000000000000..de951a7b4a608b09823d9da73c24c8256feb329e --- /dev/null +++ b/host/ide/src/base-ui/utils/ExcelFormater.ts @@ -0,0 +1,205 @@ +/* + * Copyright (C) 2022 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export class ExcelFormater { + static tmplCellXML = '{data}' + static base64 = function (s: any) { + return window.btoa(unescape(encodeURIComponent(s))) + } + + static format(s: any, c: any): string { + return s.replace(/{(\w+)}/g, function (m: any, p: any) { + return c[p]; + }) + } + + static createExcelRow(columns: any[], data: any): string { + let rowsXML = ""; + rowsXML += ''; + for (let k = 0; k < columns.length; k++) { + let dataIndex = columns[k].getAttribute('data-index') + let columnName = columns[k].getAttribute('title') + if (columnName == "") { + columnName = dataIndex + } + let ctx = { + attributeStyleID: '', + nameType: 'String', + data: data ? (data[dataIndex] || "") : columnName, + attributeFormula: '' + }; + rowsXML += this.format(this.tmplCellXML, ctx); + } + rowsXML += '' + if (data && data.children != undefined && data.children.length > 0) { + data.children.forEach((child: any) => { + rowsXML += this.createExcelRow(columns, child) + }) + } + return rowsXML + } + + static addImage(baseStr: string) { + return `${ + this.format(this.tmplCellXML, { + attributeStyleID: '', + nameType: 'String', + data: `
`, + attributeFormula: '' + }) + }` + } + + static testExport(dataSource: { columns: any[], tables: any[], sheetName: string }[],fileName: string){ + this.tablesToHtmlExcelMultipleSheet(dataSource,fileName) + } + + static tablesToHtmlExcelMultipleSheet(dataSource: { columns: any[], tables: any[], sheetName: string }[],fileName: string, image?: string){ + let sheets:any[] = [] + dataSource.forEach((data)=>{ + sheets.push(this.createTableData(data.columns,data.tables,image)) + }) + this.tablesToExcelTestSheet(sheets,fileName,dataSource) + } + + static createTableData(columns:any[],dataSource:any[],image?:string){ + let tableData = ""; + let columnDatas = columns.map((column)=>{ + let dataIndex = column.getAttribute('data-index') + let columnName = column.getAttribute('title') + if (columnName == "") { + columnName = dataIndex + } + return { + columnName:columnName, + dataIndex:dataIndex + } + }) + tableData+=this.createTHead(columnDatas.map((item)=>{ + return item.columnName + })) + let columnDataIndexes = columnDatas.map(item=>item.dataIndex) + dataSource.forEach((data,index)=>{ + if(index == 0&&image){ + tableData+=this.createTableRow(columnDataIndexes,data,image) + }else { + tableData+=this.createTableRow(columnDataIndexes,data) + } + }) + return tableData + } + + static createTHead(columns:any[]){ + let header = "" + columns.forEach((column)=>{ + header+=`${column}` + }) + header+="" + return header + } + + static createTableRow(columns:any[],data:any,image?:any){ + let childrenData = "" + if(data.children !== undefined){ + data.children.forEach((child:any)=>{ + if(child){ + childrenData +=this.createTableRow(columns,child) + } + }) + } + return `${columns.map((column)=>{ + return `${(data[column]+"").replace("μ","u")}`||'' + }).join("")}${image?`
`:""}${childrenData}` + } + + static tablesToExcelTestSheet(tables:any[], filename:string, dataSource: { columns: any[], tables: any[], sheetName: string }[]) { + let uri = 'data:application/vnd.ms-excel;base64,' + , html_start = `` + , template_ExcelWorksheet = `{SheetName}` + , template_ListWorksheet = `` + , template_HTMLWorksheet = ` +------=_NextPart_dummy +Content-Location: sheet{SheetIndex}.htm +Content-Type: text/html; charset=windows-1252 + +` + html_start + ` + + + + + +{SheetContent}
+` + , template_WorkBook = `MIME-Version: 1.0 +X-Document-Type: Workbook +Content-Type: multipart/related; boundary="----=_NextPart_dummy" + +------=_NextPart_dummy +Content-Location: WorkBook.htm +Content-Type: text/html; charset=windows-1252 + +` + html_start + ` + + + + + + + + + <body><p>This page uses frames, but your browser does not support them.</p></body> + + +{HTMLWorksheets} +Content-Location: filelist.xml +Content-Type: text/xml; charset="utf-8" + + + + {ListWorksheets} + + +------=_NextPart_dummy-- +` + let context_WorkBook = { + ExcelWorksheets: '' + , HTMLWorksheets: '' + , ListWorksheets: '' + }; + tables.forEach((item,sheetIndex)=>{ + context_WorkBook.ExcelWorksheets += this.format(template_ExcelWorksheet, { + SheetIndex: sheetIndex + , SheetName: dataSource[sheetIndex].sheetName + }); + context_WorkBook.HTMLWorksheets += this.format(template_HTMLWorksheet, { + SheetIndex: sheetIndex + , SheetContent: item + }); + context_WorkBook.ListWorksheets += this.format(template_ListWorksheet, { + SheetIndex: sheetIndex + }); + }) + let link = document.createElement('a') + link.href = uri + this.base64(this.format(template_WorkBook, context_WorkBook)); + link.download = filename+'.xls'; + link.target = '_blank'; + link.click() + } +} \ No newline at end of file diff --git a/host/ide/src/doc/hiSystemEvent.html b/host/ide/src/doc/hiSystemEvent.html index 13a94d9d913e991d7f0a056f898ce0ec9f0dc8e6..ef1b0fbe1fd4dfc60f305835eb752911fb68a3f7 100644 --- a/host/ide/src/doc/hiSystemEvent.html +++ b/host/ide/src/doc/hiSystemEvent.html @@ -766,7 +766,7 @@

1.1.HiSystemEvent抓取配置参数

-

勾选HiSystemEvent选项抓取HiSystemEvent数据
+

打开Start Hisystem Event Tracker Record开关抓取
GitHub Logo
再点击Record setting,在output file path输入文件名hiprofiler_data_hisystemevent.htrace,拖动滚动条设置buffer size大小是64M,抓取时长是50s
diff --git a/host/ide/src/doc/sdk_capture_display.html b/host/ide/src/doc/sdk_capture_display.html new file mode 100644 index 0000000000000000000000000000000000000000..4096a8767340cfa7fcbb2e79e4c78dca4423bb2d --- /dev/null +++ b/host/ide/src/doc/sdk_capture_display.html @@ -0,0 +1,796 @@ + + + + sdk抓取和展示说明 + + + + + + +

+

Sdk抓取

+ +

1.Sdk的抓取

+ +

1.1.Sdk抓取配置参数

+ +

打开Start Custom Config开关抓取Sdk数据
+ GitHub Logo

+ +
+ + + + + + + \ No newline at end of file diff --git a/host/ide/src/figures/Scheduling.jpg b/host/ide/src/figures/Scheduling.jpg index 35363847fee7908722083d874252022e6bd5c5d0..e871f95cef195e7c660d419641ddf31a2d4bd4b7 100644 Binary files a/host/ide/src/figures/Scheduling.jpg and b/host/ide/src/figures/Scheduling.jpg differ diff --git a/host/ide/src/figures/hiSystemEvent/hisyseventsetting.jpg b/host/ide/src/figures/hiSystemEvent/hisyseventsetting.jpg index 20d75c8776e91be32f5013cbcb27085d2995b3b2..b648514192297e94296a484a8fe4e3ad761b2d19 100644 Binary files a/host/ide/src/figures/hiSystemEvent/hisyseventsetting.jpg and b/host/ide/src/figures/hiSystemEvent/hisyseventsetting.jpg differ diff --git a/host/ide/src/figures/metrics/Sql.jpg b/host/ide/src/figures/metrics/Sql.jpg index ecbea173d79c563dcd104e77b08cc1b7863ca214..24dcde8f9216b9ef5a8dc59af3a61371b09a29ca 100644 Binary files a/host/ide/src/figures/metrics/Sql.jpg and b/host/ide/src/figures/metrics/Sql.jpg differ diff --git a/host/ide/src/figures/nativememorysetting.jpg b/host/ide/src/figures/nativememorysetting.jpg index 58e57914b335c0fa28d7847ca6832127b25f9e38..cdc2d669a94b3e50ac6ed8cee26e9e54aea931c7 100644 Binary files a/host/ide/src/figures/nativememorysetting.jpg and b/host/ide/src/figures/nativememorysetting.jpg differ diff --git a/host/ide/src/figures/perfsetting.jpg b/host/ide/src/figures/perfsetting.jpg index 883aaa90e162c4a03ece07830eab612f41c06fa7..b0a47bfabcf2ac6e2755c9a62b6a8652bf13b518 100644 Binary files a/host/ide/src/figures/perfsetting.jpg and b/host/ide/src/figures/perfsetting.jpg differ diff --git a/host/ide/src/figures/sdk/sdk.jpg b/host/ide/src/figures/sdk/sdk.jpg new file mode 100644 index 0000000000000000000000000000000000000000..d834d135a70a9ec080850d45f7b4e8e80237ab36 Binary files /dev/null and b/host/ide/src/figures/sdk/sdk.jpg differ diff --git a/host/ide/src/trace/SpApplication.ts b/host/ide/src/trace/SpApplication.ts index e3fdb034a85ee59f148ffb11f81562149c7a5388..9da44fb3102163c907cca9ea5ccb28ec33372604 100644 --- a/host/ide/src/trace/SpApplication.ts +++ b/host/ide/src/trace/SpApplication.ts @@ -37,12 +37,14 @@ import "./component/SpRecordTrace.js"; import "./component/SpMetrics.js"; import "./component/SpInfoAndStas.js"; import "./component/trace/base/TraceRow.js"; +import "./component/schedulingAnalysis/SpSchedulingAnalysis.js" import {info, log} from "../log/Log.js"; import {LitMainMenuGroup} from "../base-ui/menu/LitMainMenuGroup.js"; import {LitMainMenuItem} from "../base-ui/menu/LitMainMenuItem.js"; import {LitIcon} from "../base-ui/icon/LitIcon.js"; import {Cmd} from "../command/Cmd.js"; import {TraceRow} from "./component/trace/base/TraceRow.js"; +import {SpSchedulingAnalysis} from "./component/schedulingAnalysis/SpSchedulingAnalysis.js"; @element('sp-application') export class SpApplication extends BaseElement { @@ -342,6 +344,7 @@ export class SpApplication extends BaseElement { +