Highstock - open modal on click of point and pass in ID - asp.net-mvc-4
I've got the following code
https://jsfiddle.net/MarkDavies/nz4mv60g/20/
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/boost.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
var data = [
[1480948200000, 109.11, 3512],
[1481034600000, 109.95, 3512],
[1481121000000, 111.03, 3512],
[1481207400000, 112.12, 3512],
[1481293800000, 113.95, 3512],
[1481553000000, 113.3, 3512],
[1481639400000, 115.19, 3512],
[1481725800000, 115.19, 3512],
[1481812200000, 115.82, 3512],
[1481898600000, 115.97, 3512],
[1482157800000, 116.64, 3512],
[1482244200000, 116.95, 3512],
[1482330600000, 117.06, 3512],
[1482417000000, 116.29, 3512],
[1482503400000, 116.52, 3512],
[1482849000000, 117.26, 3512],
[1482935400000, 116.76, 3512],
[1483021800000, 116.73, 3512],
[1483108200000, 115.82, 3512],
[1483453800000, 116.15, 3512],
[1483540200000, 116.02, 3512],
[1483626600000, 116.61, 3512],
[1483713000000, 117.91, 3512],
[1483972200000, 118.99, 3512],
[1484058600000, 119.11, 3512],
[1484145000000, 119.75, 3512],
[1484231400000, 119.25, 3512],
[1484317800000, 119.04, 3512],
[1484663400000, 120, 3512],
[1484749800000, 119.99, 3512],
[1484836200000, 119.78, 3512],
[1484922600000, 120, 3512],
[1485181800000, 120.08, 3512],
[1485268200000, 119.97, 3512],
[1485354600000, 121.88, 3512],
[1485441000000, 121.94, 3512],
[1485527400000, 121.95, 3512],
[1485786600000, 121.63, 3512],
[1485873000000, 121.35, 3512],
[1485959400000, 128.75, 3512],
[1486045800000, 128.53, 3512],
[1486132200000, 129.08, 3512],
[1486391400000, 130.29, 3512],
[1486477800000, 131.53, 3512],
[1486564200000, 132.04, 3512],
[1486650600000, 132.42, 3512],
[1486737000000, 132.12, 3512],
[1486996200000, 133.29, 3512],
[1487082600000, 135.02, 3512],
[1487169000000, 135.51, 3512],
[1487255400000, 135.35, 3512],
[1487341800000, 135.72, 3512],
[1487687400000, 136.7, 3512],
[1487773800000, 137.11, 3512],
[1487860200000, 136.53, 3512],
[1487946600000, 136.66, 3512],
[1488205800000, 136.93, 3512],
[1488292200000, 136.99, 3512],
[1488378600000, 139.79, 3512],
[1488465000000, 138.96, 3512],
[1488551400000, 139.78, 3512],
[1488810600000, 139.34, 3512],
[1488897000000, 139.52, 3512],
[1488983400000, 139, 3512],
[1489069800000, 138.68, 3512],
[1489156200000, 139.14, 3512],
[1489411800000, 139.2, 3512],
[1489498200000, 138.99, 3512],
[1489584600000, 140.46, 3512],
[1489671000000, 140.69, 3512],
[1489757400000, 139.99, 3512],
[1490016600000, 141.46, 3512],
[1490103000000, 139.84, 3512],
[1490189400000, 141.42, 3512],
[1490275800000, 140.92, 3512],
[1490362200000, 140.64, 3512],
[1490621400000, 140.88, 3512],
[1490707800000, 143.8, 3512],
[1490794200000, 144.12, 3512],
[1490880600000, 143.93, 3512],
[1490967000000, 143.66, 3512],
[1491226200000, 143.7, 3512],
[1491312600000, 144.77, 3512],
[1491399000000, 144.02, 3512],
[1491485400000, 143.66, 3512],
[1491571800000, 143.34, 3512],
[1491831000000, 143.17, 3512],
[1491917400000, 141.63, 3512],
[1492003800000, 141.8, 3512],
[1492090200000, 141.05, 3512],
[1492435800000, 141.83, 3512],
[1492522200000, 141.2, 3512],
[1492608600000, 140.68, 3512],
[1492695000000, 142.44, 3512],
[1492781400000, 142.27, 3512],
[1493040600000, 143.64, 3512],
[1493127000000, 144.53, 3512],
[1493213400000, 143.68, 3512],
[1493299800000, 143.79, 3512],
[1493386200000, 143.65, 3512],
[1493645400000, 146.58, 3512],
[1493731800000, 147.51, 3512],
[1493818200000, 147.06, 3512],
[1493904600000, 146.53, 3512],
[1493991000000, 148.96, 3512],
[1494250200000, 153.01, 3512],
[1494336600000, 153.99, 3512],
[1494423000000, 153.26, 3512],
[1494509400000, 153.95, 3512],
[1494595800000, 156.1, 3512],
[1494855000000, 155.7, 3512],
[1494941400000, 155.47, 3512],
[1495027800000, 150.25, 3512],
[1495114200000, 152.54, 3512],
[1495200600000, 153.06, 3512],
[1495459800000, 153.99, 3512],
[1495546200000, 153.8, 3512],
[1495632600000, 153.34, 3512],
[1495719000000, 153.87, 3512],
[1495805400000, 153.61, 3512],
[1496151000000, 153.67, 3512],
[1496237400000, 152.76, 3512],
[1496323800000, 153.18, 3512],
[1496410200000, 155.45, 3512],
[1496669400000, 153.93, 3512],
[1496755800000, 154.45, 3512],
[1496842200000, 155.37, 3512],
[1496928600000, 154.99, 3512],
[1497015000000, 148.98, 3512],
[1497274200000, 145.42, 3512],
[1497360600000, 146.59, 3512],
[1497447000000, 145.16, 3512],
[1497533400000, 144.29, 3512],
[1497619800000, 142.27, 3512],
[1497879000000, 146.34, 3512],
[1497965400000, 145.01, 3512],
[1498051800000, 145.87, 3512],
[1498138200000, 145.63, 3512],
[1498224600000, 146.28, 3512],
[1498483800000, 145.82, 3512],
[1498570200000, 143.73, 3512],
[1498656600000, 145.83, 3512],
[1498743000000, 143.68, 3512],
[1498829400000, 144.02, 3512],
[1499088600000, 143.5, 3512],
[1499261400000, 144.09, 3512],
[1499347800000, 142.73, 3512],
[1499434200000, 144.18, 3512],
[1499693400000, 145.06, 3512],
[1499779800000, 145.53, 3512],
[1499866200000, 145.74, 3512],
[1499952600000, 147.77, 3512],
[1500039000000, 149.04, 3512],
[1500298200000, 149.56, 3512],
[1500384600000, 150.08, 3512],
[1500471000000, 151.02, 3512],
[1500557400000, 150.34, 3512],
[1500643800000, 150.27, 3512],
[1500903000000, 152.09, 3512],
[1500989400000, 152.74, 3512],
[1501075800000, 153.46, 3512],
[1501162200000, 150.56, 3512],
[1501248600000, 149.5, 3512],
[1501507800000, 148.73, 3512],
[1501594200000, 150.05, 3512],
[1501680600000, 157.14, 3512],
[1501767000000, 155.57, 3512],
[1501853400000, 156.39, 3512],
[1502112600000, 158.81, 3512],
[1502199000000, 160.08, 3512],
[1502285400000, 161.06, 3512],
[1502371800000, 155.32, 3512],
[1502458200000, 157.48, 3512],
[1502717400000, 159.85, 3512],
[1502803800000, 161.6, 3512],
[1502890200000, 160.95, 3512],
[1502976600000, 157.86, 3512],
[1503063000000, 157.5, 3512],
[1503322200000, 157.21, 3512],
[1503408600000, 159.78, 3512],
[1503495000000, 159.98, 3512],
[1503581400000, 159.27, 3512],
[1503667800000, 159.86, 3512],
[1503927000000, 161.47, 3512],
[1504013400000, 162.91, 3512],
[1504099800000, 163.35, 3512],
[1504186200000, 164, 3512],
[1504272600000, 164.05, 3512],
[1504618200000, 162.08, 3512],
[1504704600000, 161.91, 3512],
[1504791000000, 161.26, 3512],
[1504877400000, 158.63, 3512],
[1505136600000, 161.5, 3512],
[1505223000000, 160.86, 3512],
[1505309400000, 159.65, 3512],
[1505395800000, 158.28, 3512],
[1505482200000, 159.88, 3512],
[1505741400000, 158.67, 3512],
[1505827800000, 158.73, 3512],
[1505914200000, 156.07, 3512],
[1506000600000, 153.39, 3512],
[1506087000000, 151.89, 3512],
[1506346200000, 150.55, 3512],
[1506432600000, 153.14, 3512],
[1506519000000, 154.23, 3512],
[1506605400000, 153.28, 3512],
[1506691800000, 154.12, 3512],
[1506951000000, 153.81, 3512],
[1507037400000, 154.48, 3512],
[1507123800000, 153.48, 3512],
[1507210200000, 155.39, 3512],
[1507296600000, 155.3, 3512],
[1507555800000, 155.84, 3512],
[1507642200000, 155.9, 3512],
[1507728600000, 156.55, 3512],
[1507815000000, 156, 3512],
[1507901400000, 156.99, 3512],
[1508160600000, 159.88, 3512],
[1508247000000, 160.47, 3512],
[1508333400000, 159.76, 3512],
[1508419800000, 155.98, 3512],
[1508506200000, 156.25, 3512],
[1508765400000, 156.17, 3512],
[1508851800000, 157.1, 3512],
[1508938200000, 156.41, 3512],
[1509024600000, 157.41, 3512],
[1509111000000, 163.05, 3512],
[1509370200000, 166.72, 3512],
[1509456600000, 169.04, 3512],
[1509543000000, 166.89, 3512],
[1509629400000, 168.11, 3512],
[1509715800000, 172.5, 3512],
[1509978600000, 174.25, 3512],
[1510065000000, 174.81, 3512],
[1510151400000, 176.24, 3512],
[1510237800000, 175.88, 3512],
[1510324200000, 174.67, 3512],
[1510583400000, 173.97, 3512],
[1510669800000, 171.34, 3512],
[1510756200000, 169.08, 3512],
[1510842600000, 171.1, 3512],
[1510929000000, 170.15, 3512],
[1511188200000, 169.98, 3512],
[1511274600000, 173.14, 3512],
[1511361000000, 174.96, 3512],
[1511533800000, 174.97, 3512],
[1511793000000, 174.09, 3512],
[1511879400000, 173.07, 3512],
[1511965800000, 169.48, 3512],
[1512052200000, 171.85, 3512],
[1512138600000, 171.05, 3512],
[1512397800000, 169.8, 3512],
[1512484200000, 169.64, 3512],
[1512570600000, 169.01, 3512],
[1512657000000, 169.32, 3512],
[1512743400000, 169.37, 3512],
[1513002600000, 172.67, 3512],
[1513089000000, 171.7, 3512],
[1513175400000, 172.27, 3512],
[1513261800000, 172.22, 3512],
[1513348200000, 173.97, 3512],
[1513607400000, 176.42, 3512],
[1513693800000, 174.54, 3512],
[1513780200000, 174.35, 3512],
[1513866600000, 175.01, 3512],
[1513953000000, 175.01, 3512],
[1514298600000, 170.57, 3512],
[1514385000000, 170.6, 3512],
[1514471400000, 171.08, 3512],
[1514557800000, 169.23, 3512],
[1514903400000, 172.26, 3512],
[1514989800000, 172.23, 3512],
[1515076200000, 173.03, 3512],
[1515162600000, 175, 3512],
[1515421800000, 174.35, 3512],
[1515508200000, 174.33, 3512],
[1515594600000, 174.29, 3512],
[1515681000000, 175.28, 3512],
[1515767400000, 177.09, 3512],
[1516113000000, 176.19, 3512],
[1516199400000, 179.1, 3512],
[1516285800000, 179.26, 3512],
[1516372200000, 178.46, 3512],
[1516631400000, 177, 3512],
[1516717800000, 177.04, 3512],
[1516804200000, 174.22, 3512],
[1516890600000, 171.11, 3512],
[1516977000000, 171.51, 3512],
[1517236200000, 167.96, 3512],
[1517322600000, 166.97, 3512],
[1517409000000, 167.43, 3512],
[1517495400000, 167.78, 3512],
[1517581800000, 160.5, 3512],
[1517841000000, 156.49, 3512],
[1517927400000, 163.03, 3512],
[1518013800000, 159.54, 3512],
[1518100200000, 155.15, 3512],
[1518186600000, 156.41, 3512],
[1518445800000, 162.71, 3512],
[1518532200000, 164.34, 3512],
[1518618600000, 167.37, 3512],
[1518705000000, 172.99, 3512],
[1518791400000, 172.43, 3512],
[1519137000000, 171.85, 3512],
[1519223400000, 171.07, 3512],
[1519309800000, 172.5, 3512],
[1519396200000, 175.5, 3512],
[1519655400000, 178.97, 3512],
[1519741800000, 178.39, 3512],
[1519828200000, 178.12, 3512],
[1519914600000, 175, 3512],
[1520001000000, 176.21, 3512],
[1520260200000, 176.82, 3512],
[1520346600000, 176.67, 3512],
[1520433000000, 175.03, 3512],
[1520519400000, 176.94, 3512],
[1520605800000, 179.98, 3512],
[1520861400000, 181.72, 3512],
[1520947800000, 179.97, 3512],
[1521034200000, 178.44, 3512],
[1521120600000, 178.65, 3512],
[1521207000000, 178.02, 3512],
[1521466200000, 175.3, 3512],
[1521552600000, 175.24, 3512],
[1521639000000, 171.27, 3512],
[1521725400000, 168.85, 3512],
[1521811800000, 164.94, 3512],
[1522071000000, 172.77, 3512],
[1522157400000, 168.34, 3512],
[1522243800000, 166.48, 3512],
[1522330200000, 167.78, 3512],
[1522675800000, 166.68, 3512],
[1522762200000, 168.39, 3512],
[1522848600000, 171.61, 3512],
[1522935000000, 172.8, 3512],
[1523021400000, 168.38, 3512],
[1523280600000, 170.05, 3512],
[1523367000000, 173.25, 3512],
[1523453400000, 172.44, 3512],
[1523539800000, 174.14, 3512],
[1523626200000, 174.73, 3512],
[1523885400000, 175.82, 3512],
[1523971800000, 178.24, 3512],
[1524058200000, 177.84, 3512],
[1524144600000, 172.8, 3512],
[1524231000000, 165.72, 3512],
[1524490200000, 165.24, 3512],
[1524576600000, 162.94, 3512],
[1524663000000, 163.65, 3512],
[1524749400000, 164.22, 3512],
[1524835800000, 162.32, 3512],
[1525095000000, 165.26, 3512],
[1525181400000, 169.1, 3512],
[1525267800000, 176.57, 3512],
[1525354200000, 176.89, 3512],
[1525440600000, 183.83, 3512],
[1525699800000, 185.16, 3512],
[1525786200000, 186.05, 3512],
[1525872600000, 187.36, 3512],
[1525959000000, 190.04, 3512],
[1526045400000, 188.59, 3512],
[1526304600000, 188.15, 3512],
[1526391000000, 186.44, 3512],
[1526477400000, 188.18, 3512],
[1526563800000, 186.99, 3512],
[1526650200000, 186.31, 3512],
[1526909400000, 187.63, 3512],
[1526995800000, 187.16, 3512],
[1527082200000, 188.36, 3512],
[1527168600000, 188.15, 3512],
[1527255000000, 188.58, 3512],
[1527600600000, 187.9, 3512],
[1527687000000, 187.5, 3512],
[1527773400000, 186.87, 3512],
[1527859800000, 190.24, 3512],
[1528119000000, 191.83, 3512],
[1528205400000, 193.31, 3512],
[1528291800000, 193.98, 3512],
[1528378200000, 193.46, 3512],
[1528464600000, 191.7, 3512],
[1528723800000, 191.23, 3512],
[1528810200000, 192.28, 3512],
[1528896600000, 190.7, 3512],
[1528983000000, 190.8, 3512],
[1529069400000, 188.84, 3512],
[1529328600000, 188.74, 3512],
[1529415000000, 185.69, 3512],
[1529501400000, 186.5, 3512],
[1529587800000, 185.46, 3512],
[1529674200000, 184.92, 3512],
[1529933400000, 182.17, 3512],
[1530019800000, 184.43, 3512],
[1530106200000, 184.16, 3512],
[1530192600000, 185.5, 3512],
[1530279000000, 185.11, 3512],
[1530538200000, 187.18, 3512],
[1530624600000, 183.92, 3512],
[1530797400000, 185.4, 3512],
[1530883800000, 187.97, 3512],
[1531143000000, 190.58, 3512],
[1531229400000, 190.35, 3512],
[1531315800000, 187.88, 3512],
[1531402200000, 191.03, 3512],
[1531488600000, 191.33, 3512],
[1531747800000, 190.91, 3512],
[1531834200000, 191.45, 3512],
[1531920600000, 190.4, 3512],
[1532007000000, 191.88, 3512],
[1532093400000, 191.44, 3512],
[1532352600000, 191.61, 3512],
[1532439000000, 193, 3512],
[1532525400000, 194.82, 3512],
[1532611800000, 194.21, 3512],
[1532698200000, 190.98, 3512],
[1532957400000, 189.91, 3512],
[1533043800000, 190.29, 3512],
[1533130200000, 201.5, 3512],
[1533216600000, 207.39, 3512],
[1533303000000, 207.99, 3512],
[1533562200000, 209.07, 3512],
[1533648600000, 207.11, 3512],
[1533735000000, 207.25, 3512],
[1533821400000, 208.88, 3512],
[1533907800000, 207.53, 3512],
[1534167000000, 208.87, 3512],
[1534253400000, 209.75, 3512],
[1534339800000, 210.24, 3512],
[1534426200000, 213.32, 3512],
[1534512600000, 217.58, 3512],
[1534771800000, 215.46, 3512],
[1534858200000, 215.04, 3512],
[1534944600000, 215.05, 3512],
[1535031000000, 215.49, 3512],
[1535117400000, 216.16, 3512],
[1535376600000, 217.94, 3512],
[1535463000000, 219.7, 3512],
[1535549400000, 222.98, 3512],
[1535635800000, 225.03, 3512],
[1535722200000, 227.63, 3512],
[1536067800000, 228.36, 3512],
[1536154200000, 226.87, 3512],
[1536240600000, 223.1, 3512],
[1536327000000, 221.3, 3512],
[1536586200000, 218.33, 3512],
[1536672600000, 223.85, 3512],
[1536759000000, 221.07, 3512],
[1536845400000, 226.41, 3512],
[1536931800000, 223.84, 3512],
[1537191000000, 217.88, 3512],
[1537277400000, 218.24, 3512],
[1537363800000, 218.37, 3512],
[1537450200000, 220.03, 3512],
[1537536600000, 217.66, 3512],
[1537795800000, 220.79, 3512],
[1537882200000, 222.19, 3512],
[1537968600000, 220.42, 3512],
[1538055000000, 224.95, 3512],
[1538141400000, 225.74, 3512],
[1538400600000, 227.26, 3512],
[1538487000000, 229.28, 3512],
[1538573400000, 232.07, 3512],
[1538659800000, 227.99, 3512],
[1538746200000, 224.29, 3512],
[1539005400000, 223.77, 3512],
[1539091800000, 226.87, 3512],
[1539178200000, 216.36, 3512],
[1539264600000, 214.45, 3512],
[1539351000000, 222.11, 3512],
[1539610200000, 217.36, 3512],
[1539696600000, 222.15, 3512],
[1539783000000, 221.19, 3512],
[1539869400000, 216.02, 3512],
[1539955800000, 219.31, 3512],
[1540215000000, 220.65, 3512],
[1540301400000, 222.73, 3512],
[1540387800000, 215.09, 3512],
[1540474200000, 219.8, 3512],
[1540560600000, 216.3, 3512],
[1540819800000, 212.24, 3512],
[1540906200000, 213.3, 3512],
[1540992600000, 218.86, 3512],
[1541079000000, 222.22, 3512],
[1541165400000, 207.48, 3512],
[1541428200000, 201.59, 3512],
[1541514600000, 203.77, 3512],
[1541601000000, 209.95, 3512],
[1541687400000, 208.49, 3512],
[1541773800000, 204.47, 3512],
[1542033000000, 194.17, 3512],
[1542119400000, 192.23, 3512],
[1542205800000, 186.8, 3512],
[1542292200000, 191.41, 3512],
[1542378600000, 193.53, 3512],
[1542637800000, 185.86, 3512],
[1542724200000, 176.98, 3512],
[1542810600000, 176.78, 3512],
[1542983400000, 172.29, 3512],
[1543242600000, 174.62, 3512],
[1543329000000, 174.24, 3512],
[1543415400000, 180.94, 3512],
[1543501800000, 179.55, 3512],
[1543588200000, 178.58, 3512]
]
// Create the chart
Highcharts.stockChart('container', {
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
series: [{
turboThreshold: 10,
name: 'AAPL',
data: data,
keys: ['x', 'y', 'sepcialId'],
tooltip: {
valueDecimals: 2,
pointFormat: '<span style="color:{point.color}">●</span> {series.name}: <b>{point.y}</b>, ID: {point.special-id}<br/>.'
},
point: {
events: {
click: function () {
console.log(this)
window.open('http://Google.com?id=' + this.sepcialId, '_blank');
}
}
}
}]
});
If you click a point it will open a new window and pass in the ID of the selected item
I would like to popup a modal instead of a new window/url, and pass in the ID into this modal
I will then use asp.net MVC to get the required stuff and display to the user
I'm using bootstrap in the project already.
Is this possible using highcharts? if so how?
Related
prettier ESLint circular errors
i am creating a vue component
but i am getting the following error
Type annotations can only be used in TypeScript files.
if i remove the type clause i then get
Missing return type on function.
the component looks like:
<template>
<pre>Market:{{ market }}</pre>
</template>
<script>
import Market from "./Market";
export default {
name: Market,
components: {},
data() { //<--- issue is reported here
return {
market: new Market(),
};
},
};
</script>
i'm guessing i have a conflict in prettier and eslints config so that one is treating vue as TS compatableand the other isn't
i've tried various tweaks and changes but nothing so far has made any diference so can any one point me to the correct config to resolve this?
tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"#/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
babel.config.js
module.exports = {
presets: ["#vue/cli-plugin-babel/preset"],
};
settings,json
{
"editor.insertSpaces": false,
"editor.minimap.enabled": false,
"files.eol": "\n",
"workbench.sideBar.location": "right",
"php-cs-fixer.executablePath": "${extensionPath}\\php-cs-fixer.phar",
"launch": {
"configurations": [],
"compounds": []
},
"debug.javascript.usePreview": false,
"window.zoomLevel": 3,
"eslint.format.enable": true
}
packange.json
{
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-class-component": "^8.0.0-0"
},
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^4.18.0",
"#typescript-eslint/parser": "^4.18.0",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-typescript": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/eslint-config-typescript": "^7.0.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.0.0",
"prettier": "^2.2.1",
"typescript": "~4.1.5"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended",
"#vue/typescript/recommended",
"#vue/prettier",
"#vue/prettier/#typescript-eslint"
],
"parserOptions": {
"ecmaVersion": 2020
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
I already had the same issue, fix it with: <script lang="ts"> ... </script> let me know if it works for you
How to configure vue project with custom configuration for prettier and eslint using vscode
When I save the project into VSCode I'm getting wrong break like into html tags, how to solve it? The error is explaned into the code / images down.
That is the non formated html.
<div class="a" :class="3" :data-option="2" :id="1" :title="'a'">Abcatece</div>
After run format getting that wrong formated Html Tags.
<div class="a" :class="3" :data-option="2" :id="1" :title="'a'"
>
Abcatece
</div
>
The formated html need to be in that way.
<div class="a" :class="3" :data-option="2" :id="1" :title="'a'">
Some text here
</div>
That is my configurations package.json and .prettierrc.js
Package.json
"name": "project-name",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#coreui/coreui": "~3.0.0-beta.4",
"#coreui/icons": "^1.0.1",
"#coreui/icons-vue": "^1.3.1",
"#coreui/utils": "^1.2.2",
"#coreui/vue": "^3.0.0-beta.11",
"#fortawesome/fontawesome-free": "^5.13.0",
"#joeattardi/emoji-button": "^2.12.1",
"#microsoft/signalr": "3.1.3",
"#toast-ui/editor": "^2.0.1",
"axios": "^0.19.2",
"bootstrap": "^4.4.1",
"bootstrap-vue": "^2.9.0",
"highcharts": "^8.0.4",
"highcharts-vue": "^1.3.5",
"mic-recorder-to-mp3": "^2.2.1",
"uuid": "^7.0.2",
"vue": "^2.6.11",
"vue-i18n": "8.16.0",
"vue-notification": "1.3.20",
"vue-router": "^3.1.6",
"vue-select": "^3.9.5",
"vuex": "^3.1.3"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.2.3",
"#vue/cli-plugin-eslint": "^4.2.3",
"#vue/cli-service": "^4.2.3",
"babel-eslint": "^10.1.0",
"#vue/eslint-config-prettier": "^6.0.0",
"babel-plugin-transform-remove-console": "^6.9.4",
"core-js": "^3.6.4",
"eslint": "^6.8.0",
"prettier": "^2.0.2",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11",
"sass-loader": "^8.0.2",
"node-sass": "^4.13.1"
},
"eslintConfig": {
"root": true,
"env": {
"browser": true,
"node": true,
"es6": true
},
"extends": [
"eslint:recommended",
"#vue/prettier",
"plugin:prettier/recommended",
"plugin:vue/recommended"
],
"rules": {
"no-unused-vars": [
"warn"
],
"vue/component-tags-order": [
"off",
{
"order": [
"template",
"script",
"style"
]
}
],
"vue/singleline-html-element-content-newline": [
"off",
{
"ignoreWhenNoAttributes": true,
"ignoreWhenEmpty": true
}
],
"vue/html-indent": "off",
"vue/html-self-closing": [
"warn",
{
"html": {
"normal": "any",
"void": "any",
"component": "any"
}
}
],
"vue/attribute-hyphenation": [
"off",
{
"ignore": []
}
],
"max-len": [
"warn",
{
"code": 120,
"ignoreComments": true
}
],
"vue/max-attributes-per-line": [
"warn",
{
"singleline": 4,
"multiline": {
"max": 1,
"allowFirstLine": true
}
}
]
},
"parserOptions": {
"parser": "babel-eslint"
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
.prettierrc.js
module.exports = {
tabWidth: 2,
tabs: false,
semi: true,
singleQuote: false,
quoteProps: "as-needed",
trailingComma: "none",
bracketSpacing: true,
jsxBracketSameLine: true,
arrowParens: "always",
endOfLine: "lf",
htmlWhitespaceSensitivity: "strict"
};
Installing jest & vue test utils manually no - trouble with import
I am trying to install vue-test-utils and jest in a project. It is vue-cli project but I did not setup the testing when I ran it initially.
It finds the test but fails on the import statements.
Here is the error.
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
It is almost certainly a babel thing (I think) but I cannot work it out.
Here are the config files.
babel.config.js
module.exports = {
presets: [
'#vue/app'
]
}
jest.config.js
module.exports = {
moduleFileExtensions: [
'js',
'jsx',
'json',
'vue'
],
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\\.jsx?$': 'babel-jest',
"^.+\\.js$": "<rootDir>/node_modules/babel-jest"
},
transformIgnorePatterns: [
'/node_modules/'
],
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1'
},
snapshotSerializers: [
'jest-serializer-vue'
],
testMatch: [
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
],
testURL: 'http://localhost/'
}
package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test": "jest"
},
"dependencies": {
"core-js": "^2.6.5",
"vue": "^2.6.10",
"vue-moment": "^4.0.0"
},
"devDependencies": {
"#babel/core": "^7.4.3",
"#vue/cli-plugin-babel": "^3.6.0",
"#vue/cli-plugin-eslint": "^3.6.0",
"#vue/cli-service": "^3.6.0",
"#vue/test-utils": "^1.0.0-beta.29",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.7.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"jest": "^24.7.1",
"jest-transform-stub": "^2.0.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"vue-jest": "^3.0.4",
"vue-template-compiler": "^2.5.21",
"webpack": "^4.30.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Well, looks like you need global section in your jest config. I'm using vue + ts, so my globals looks like that:
globals: {
'ts-jest': {
babelConfig: true
}
}
Vue javascript and css obfuscation
I'm working vue project. I was build it via vue-cli(Vue CLI v3.0.0-rc.3). I want obfuscate javascript files and css class names. When I was build my project I got an error:
Module build failed (from
./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from
./node_modules/postcss-loader/lib/index.js): Syntax Error
tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"target": "es5",
"module": "esnext",
"strict": true,
"strictNullChecks": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noImplicitAny": true,
"allowJs": true,
"allowSyntheticDefaultImports": true,
"downlevelIteration": true,
"sourceMap": false,
"baseUrl": "./",
"types": [
"node",
"jest"
],
"paths": {
"#/*": [
"src/*"
]
},
"lib": ["es2016", "dom", "dom.iterable", "scripthost"]
},
"include": [
"src/**/*.ts",
"src/**/*.vue",
"tests/**/*.ts"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
vue.config.js
const JavaScriptObfuscator = require('webpack-obfuscator');
module.exports = {
devServer: {
host: '0.0.0.0',
port: 80,
},
configureWebpack: {
plugins: [
new JavaScriptObfuscator ({
rotateUnicodeArray: true
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]_[hash:base64:8]'
}
}
]
}
]
}
}
};
package.json
{
"name": "tetris",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"animejs": "^2.2.0",
"axios": "^0.18.0",
"material-design-icons-iconfont": "^3.0.3",
"vue": "^2.5.16",
"vue-property-decorator": "^6.1.0",
"vue-router": "^3.0.1",
"vue-status-indicator": "^1.1.0",
"vuetify": "^1.0.19",
"vuex": "^3.0.1",
"vuex-class": "^0.3.1",
"vuex-router-sync": "^5.0.0"
},
"devDependencies": {
"#types/animejs": "^2.0.0",
"#types/jest": "^22.0.1",
"#vue/cli-plugin-babel": "^3.0.0-beta.6",
"#vue/cli-plugin-eslint": "^3.0.0-beta.15",
"#vue/cli-plugin-typescript": "^3.0.0-beta.15",
"#vue/cli-service": "^3.0.0-beta.15",
"#vue/eslint-config-airbnb": "^3.0.0-rc.3",
"#vue/eslint-config-prettier": "^3.0.0-beta.6",
"#vue/eslint-config-typescript": "^3.0.0-rc.3",
"babel-core": "^7.0.0-0",
"babel-preset-vue": "^2.0.1",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1",
"ts-jest": "^22.0.1",
"vue-template-compiler": "^2.5.16",
"uglifyjs-webpack-plugin": "latest",
"webpack-obfuscator": "latest"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Getting import error vuejs + jest + Vuetify
I am getting following import error while running unit tests
● Test suite failed to run
/Users/aniruddha/works/awsportal_2/node_modules/vuetify/es5/components/VDivider/VDivider.js:3
import Themeable from '../../mixins/themeable';
^^^^^^
SyntaxError: Unexpected token import
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
at Object.<anonymous> (src/components/Account.vue:17:67)
at Object.<anonymous> (test/unit/specs/Account.spec.js:5:16)
Here is debug output
{
"configs": [
{
"automock": false,
"browser": false,
"cache": true,
"cacheDirectory": "/var/folders/7y/_sh8syl163xdy6jfyc7bww8w0000gn/T/jest_dx",
"clearMocks": false,
"coveragePathIgnorePatterns": [
"/node_modules/"
],
"globals": {},
"haste": {
"providesModuleNodeModules": []
},
"moduleDirectories": [
"node_modules",
"/Users/aniruddha/works/awsportal_2"
],
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"moduleNameMapper": [
[
"^#/(.*)$",
"/Users/aniruddha/works/awsportal_2/src/$1"
],
[
"^vue$",
"vue/dist/vue.common.js"
]
],
"modulePathIgnorePatterns": [],
"name": "a49c5965915e40b9abc5a5cfedaeeb54",
"resetMocks": false,
"resetModules": false,
"rootDir": "/Users/aniruddha/works/awsportal_2",
"roots": [
"/Users/aniruddha/works/awsportal_2"
],
"runner": "jest-runner",
"setupFiles": [
"/Users/aniruddha/works/awsportal_2/test/unit/setup.js"
],
"snapshotSerializers": [],
"testEnvironment": "jest-environment-jsdom",
"testMatch": [
"**/__tests__/**/*.js?(x)",
"**/?(*.)(spec|test).js?(x)"
],
"testPathIgnorePatterns": [
"/node_modules/"
],
"testRegex": "",
"testRunner": "/Users/aniruddha/works/awsportal_2/node_modules/jest-jasmine2/build/index.js",
"testURL": "about:blank",
"timers": "real",
"transform": [
[
"^.+\\.js$",
"/Users/aniruddha/works/awsportal_2/node_modules/babel-jest/build/index.js"
],
[
".*\\.(vue)$",
"/Users/aniruddha/works/awsportal_2/node_modules/jest-vue-preprocessor/index.js"
]
],
"transformIgnorePatterns": [
"/node_modules/"
],
"watchPathIgnorePatterns": []
}
],
"globalConfig": {
"bail": false,
"changedFilesWithAncestor": false,
"collectCoverage": true,
"collectCoverageFrom": [
"src/**/*.{js,vue}",
"!src/main.js",
"!src/router/index.js",
"!**/node_modules/**"
],
"coverageDirectory": "/Users/aniruddha/works/awsportal_2/coverage",
"coverageReporters": [
"html"
],
"expand": false,
"listTests": false,
"mapCoverage": true,
"maxWorkers": 3,
"noStackTrace": false,
"nonFlagArgs": [
"test/unit/specs"
],
"notify": false,
"onlyChanged": false,
"rootDir": "/Users/aniruddha/works/awsportal_2",
"runTestsByPath": false,
"testFailureExitCode": 1,
"testPathPattern": "test/unit/specs",
"testResultsProcessor": null,
"updateSnapshot": "new",
"useStderr": false,
"verbose": true,
"watch": false,
"watchman": true
},
"version": "21.2.1"
}
PASS test/unit/specs/ConfigRule.spec.js
ConfigRule.vue
✓ component have title (4ms)
✓ render template correctly (38ms)
FAIL test/unit/specs/Account.spec.js
● Test suite failed to run
/Users/aniruddha/works/awsportal_2/node_modules/vuetify/es5/components/VDivider/VDivider.js:3
import Themeable from '../../mixins/themeable';
^^^^^^
SyntaxError: Unexpected token import
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
at Object.<anonymous> (src/components/Account.vue:17:67)
at Object.<anonymous> (test/unit/specs/Account.spec.js:5:16)
Test Suites: 1 failed, 1 passed, 2 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 3.064s
Ran all test suites matching /test\/unit\/specs/i.
=============================== Coverage summary ===============================
Statements : 0.13% ( 1/775 )
Branches : 0% ( 0/277 )
Functions : 0.51% ( 1/198 )
Lines : 0.14% ( 1/706 )
================================================================================
package.json
{
"name": "awsportal_redesigned",
"version": "1.0.0",
"description": "POC",
"author": "Aniruddha Gaikwad <anieruddhad#gmail.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"test": "jest test/unit/specs --coverage",
"lint": "eslint --ext .vue src test/unit/specs",
"build": "node build/build.js"
},
"dependencies": {
"vue": "^2.5.3",
"vue-router": "^3.0.1",
"vue-session": "^0.9.10",
"vuelidate": "^0.6.1",
"vuetify": "^0.17.4",
"vuex": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.26.0",
"babel-eslint": "^7.1.1",
"babel-jest": "^21.2.0",
"babel-loader": "^7.1.1",
"babel-plugin-add-filehash": "^6.9.4",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-module-resolver": "^3.0.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-system-import-transformer": "^3.1.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^3.19.0",
"eslint-config-airbnb-base": "^11.3.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-import-resolver-webpack": "^0.8.3",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^3.0.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-vue": "^4.0.0",
"eventsource-polyfill": "^0.9.6",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"jest": "^21.2.0",
"jest-babel-preprocessor": "^0.3.0",
"jest-cli": "^22.0.4",
"jest-vue-preprocessor": "^1.3.1",
"jsdom": "^11.5.1",
"node-notifier": "^5.1.2",
"node-sass": "^4.7.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"rimraf": "^2.6.0",
"sass-loader": "^6.0.6",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"url-loader": "^0.5.8",
"vue-jest": "^1.0.2",
"vue-loader": "^13.3.0",
"vue-server-renderer": "^2.5.13",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.3",
"vue-test-utils": "^1.0.0-beta.9",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"jest": {
"verbose": true,
"moduleDirectories": [
"node_modules",
"<rootDir>/"
],
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1",
"^vue$": "vue/dist/vue.common.js"
},
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor",
".*": "<rootDir>/node_modules/babel-jest"
},
"setupFiles": [
"<rootDir>/test/unit/setup"
],
"mapCoverage": true,
"collectCoverageFrom": [
"src/**/*.{js,vue}",
"!src/main.js",
"!src/router/index.js",
"!**/node_modules/**"
],
"collectCoverage": true,
"coverageReporters": [
"html"
],
"coverageDirectory": "./coverage",
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react"
]
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
problem was with babel configuration. After going through different posts, following configuration in .babelrc works for me
{
"presets": [
["env", {"modules": false}],
["stage-2"]
],
"env": {
"test": {
"presets": [
["env", { "targets": { "node": "current" }}]
]
}
}
}