问:
Angular 8 Style issue
I am building app in Angular 8 and displaying a svg image on Angular front-end which is coming from back-end using DomSanitizer. The code works absolutely fine and it is displaying the svg image to the front-end. The issue now is that when the svg image is displaying on front-end, due to this my component style(CSS) is getting affected. In more details my Navbar which was full-width of my screen initially, after the svg image loaded to frontend, then Navbar reduce it size and adding some sort of margin to its left, right and bottom.

Html:

```<code><div class="svg" [innerHTML]="svg"></div>
</code>```

Component.ts:

```<code>import { Component, OnInit} from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
.....

@Component({......})

export class MyComponent implements OnInit {

svg:SafeHtml;

constructor(private sanitizer: DomSanitizer) { }

 ngOnInit() {
this.svg = this.sanitizer.bypassSecurityTrustHtml('SVG CONTENT');
}

}
</code>```

Once the svg image get loaded into myComponent which makes some changes to the styling and my Navbar is now not showing full screen width.

I am uploading the snapshot of my app, where you can see initially my navbar is full-width and nav-link was right align,

when the svg image loaded into then my navbar shrink add margin left, right, bottom and also nav-link content move towards left, near MyLOGO.

How to fix this issue....

SVG content:

```<code><html>
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<style>body{ margin:0 100; background:whitesmoke; }</style>
</head>
<body>
<h1></h1>
<svg height="344.16pt" version="1.1" viewbox="0 0 460.8 344.16" width="460.8pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
*{stroke-linecap:butt;stroke-linejoin:round;}
  </style>
</defs>
<g id="figure_1">
<g id="patch_1">
<path d="M 0 344.16
L 460.8 344.16
L 460.8 0
L 0 0
z
" style="fill:#ffffff;"></path>
</g>
<g id="axes_1">
<g id="patch_2">
<path d="M 37.15 319.264167
L 450 319.264167
L 450 25.334
L 37.15 25.334
z
" style="fill:#ffffff;"></path>
</g>
<g id="PolyCollection_1">
<path clip-path="url(#p627f3ac1e9)" d="M 63.901402 203.218592
L 63.901402 238.707855
L 71.886896 243.150936
L 79.872389 243.22984
L 87.857882 243.28396
L 95.843375 244.251805
L 103.828868 246.769011
L 111.814362 249.295215
L 119.799855 251.587942
L 127.785348 252.151143
L 135.770841 252.192877
L 143.756335 252.465754
L 151.741828 253.684624
L 159.727321 256.558405
L 167.712814 257.430179
L 175.698308 257.477646
L 183.683801 257.480979
L 191.669294 257.798929
L 199.654787 259.052734
L 207.64028 260.106632
L 215.625774 260.678653
L 223.611267 260.77239
L 231.59676 260.839193
L 239.582253 261.013043
L 247.567747 261.495237
L 255.55324 262.446651
L 263.538733 262.825749
L 271.524226 262.839165
L 279.50972 262.841801
L 287.495213 263.021195
L 295.480706 263.606824
L 303.466199 264.034256
L 311.451692 264.272128
L 319.437186 264.313946
L 327.422679 264.40439
L 335.408172 264.616897
L 343.393665 264.902244
L 351.379159 265.249418
L 359.364652 265.339262
L 367.350145 265.344617
L 375.335638 265.355031
L 383.321132 265.397175
L 391.306625 265.509928
L 399.292118 265.640043
L 407.277611 265.724146
L 415.263104 265.726199
L 423.248598 265.763521
L 431.234091 265.809885
L 431.234091 176.116562
L 431.234091 176.116562
L 423.248598 176.162926
L 415.263104 176.200248
L 407.277611 176.202301
L 399.292118 176.286404
L 391.306625 176.416519
L 383.321132 176.529272
L 375.335638 176.571416
L 367.350145 176.58183
L 359.364652 176.587185
L 351.379159 176.677029
L 343.393665 177.024203
L 335.408172 177.30955
L 327.422679 177.522057
L 319.437186 177.612501
L 311.451692 177.654319
L 303.466199 177.892191
L 295.480706 178.319623
L 287.495213 178.905252
L 279.50972 179.084646
L 271.524226 179.087282
L 263.538733 179.100698
L 255.55324 179.479796
L 247.567747 180.43121
L 239.582253 180.913404
L 231.59676 181.087254
L 223.611267 181.154057
L 215.625774 181.247794
L 207.64028 181.819815
L 199.654787 182.873713
L 191.669294 184.127518
L 183.683801 184.445468
L 175.698308 184.448801
L 167.712814 184.496268
L 159.727321 185.368042
L 151.741828 188.241823
L 143.756335 189.460693
L 135.770841 189.73357
L 127.785348 189.775304
L 119.799855 190.338505
L 111.814362 192.631232
L 103.828868 195.157436
L 95.843375 197.674642
L 87.857882 198.642487
L 79.872389 198.696607
L 71.886896 198.775511
L 63.901402 203.218592
z
" style="fill:#1f77b4;fill-opacity:0.25;"></path>
</g>
<g id="matplotlib.axis_1">
<g id="xtick_1">
<g id="line2d_1">
<defs>
<path d="M 0 0
L 0 3.5
" id="m50ec2796b5" style="stroke:#000000;stroke-width:0.8;"></path>
</defs>
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="55.915909" xlink:href="#m50ec2796b5" y="319.264167"></use>
</g>
</g>
<g id="text_1">
<!-- 0 -->
<defs>
<path d="M 31.78125 66.40625
Q 24.171875 66.40625 20.328125 58.90625
Q 16.5 51.421875 16.5 36.375
Q 16.5 21.390625 20.328125 13.890625
Q 24.171875 6.390625 31.78125 6.390625
Q 39.453125 6.390625 43.28125 13.890625
Q 47.125 21.390625 47.125 36.375
Q 47.125 51.421875 43.28125 58.90625
Q 39.453125 66.40625 31.78125 66.40625
z
M 31.78125 74.21875
Q 44.046875 74.21875 50.515625 64.515625
Q 56.984375 54.828125 56.984375 36.375
Q 56.984375 17.96875 50.515625 8.265625
Q 44.046875 -1.421875 31.78125 -1.421875
Q 19.53125 -1.421875 13.0625 8.265625
Q 6.59375 17.96875 6.59375 36.375
Q 6.59375 54.828125 13.0625 64.515625
Q 19.53125 74.21875 31.78125 74.21875
z
" id="DejaVuSans-48"></path>
</defs>
<g transform="translate(53.370909 332.342917)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-48"></use>
</g>
</g>
</g>
<g id="xtick_2">
<g id="line2d_2">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="135.770841" xlink:href="#m50ec2796b5" y="319.264167"></use>
</g>
</g>
<g id="text_2">
<!-- 10 -->
<defs>
<path d="M 12.40625 8.296875
L 28.515625 8.296875
L 28.515625 63.921875
L 10.984375 60.40625
L 10.984375 69.390625
L 28.421875 72.90625
L 38.28125 72.90625
L 38.28125 8.296875
L 54.390625 8.296875
L 54.390625 0
L 12.40625 0
z
" id="DejaVuSans-49"></path>
</defs>
<g transform="translate(130.680841 332.342917)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-49"></use>
<use x="63.623047" xlink:href="#DejaVuSans-48"></use>
</g>
</g>
</g>
<g id="xtick_3">
<g id="line2d_3">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="215.625774" xlink:href="#m50ec2796b5" y="319.264167"></use>
</g>
</g>
<g id="text_3">
<!-- 20 -->
<defs>
<path d="M 19.1875 8.296875
L 53.609375 8.296875
L 53.609375 0
L 7.328125 0
L 7.328125 8.296875
Q 12.9375 14.109375 22.625 23.890625
Q 32.328125 33.6875 34.8125 36.53125
Q 39.546875 41.84375 41.421875 45.53125
Q 43.3125 49.21875 43.3125 52.78125
Q 43.3125 58.59375 39.234375 62.25
Q 35.15625 65.921875 28.609375 65.921875
Q 23.96875 65.921875 18.8125 64.3125
Q 13.671875 62.703125 7.8125 59.421875
L 7.8125 69.390625
Q 13.765625 71.78125 18.9375 73
Q 24.125 74.21875 28.421875 74.21875
Q 39.75 74.21875 46.484375 68.546875
Q 53.21875 62.890625 53.21875 53.421875
Q 53.21875 48.921875 51.53125 44.890625
Q 49.859375 40.875 45.40625 35.40625
Q 44.1875 33.984375 37.640625 27.21875
Q 31.109375 20.453125 19.1875 8.296875
z
" id="DejaVuSans-50"></path>
</defs>
<g transform="translate(210.535774 332.342917)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-50"></use>
<use x="63.623047" xlink:href="#DejaVuSans-48"></use>
</g>
</g>
</g>
<g id="xtick_4">
<g id="line2d_4">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="295.480706" xlink:href="#m50ec2796b5" y="319.264167"></use>
</g>
</g>
<g id="text_4">
<!-- 30 -->
<defs>
<path d="M 40.578125 39.3125
Q 47.65625 37.796875 51.625 33
Q 55.609375 28.21875 55.609375 21.1875
Q 55.609375 10.40625 48.1875 4.484375
Q 40.765625 -1.421875 27.09375 -1.421875
Q 22.515625 -1.421875 17.65625 -0.515625
Q 12.796875 0.390625 7.625 2.203125
L 7.625 11.71875
Q 11.71875 9.328125 16.59375 8.109375
Q 21.484375 6.890625 26.8125 6.890625
Q 36.078125 6.890625 40.9375 10.546875
Q 45.796875 14.203125 45.796875 21.1875
Q 45.796875 27.640625 41.28125 31.265625
Q 36.765625 34.90625 28.71875 34.90625
L 20.21875 34.90625
L 20.21875 43.015625
L 29.109375 43.015625
Q 36.375 43.015625 40.234375 45.921875
Q 44.09375 48.828125 44.09375 54.296875
Q 44.09375 59.90625 40.109375 62.90625
Q 36.140625 65.921875 28.71875 65.921875
Q 24.65625 65.921875 20.015625 65.03125
Q 15.375 64.15625 9.8125 62.3125
L 9.8125 71.09375
Q 15.4375 72.65625 20.34375 73.4375
Q 25.25 74.21875 29.59375 74.21875
Q 40.828125 74.21875 47.359375 69.109375
Q 53.90625 64.015625 53.90625 55.328125
Q 53.90625 49.265625 50.4375 45.09375
Q 46.96875 40.921875 40.578125 39.3125
z
" id="DejaVuSans-51"></path>
</defs>
<g transform="translate(290.390706 332.342917)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-51"></use>
<use x="63.623047" xlink:href="#DejaVuSans-48"></use>
</g>
</g>
</g>
<g id="xtick_5">
<g id="line2d_5">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="375.335638" xlink:href="#m50ec2796b5" y="319.264167"></use>
</g>
</g>
<g id="text_5">
<!-- 40 -->
<defs>
<path d="M 37.796875 64.3125
L 12.890625 25.390625
L 37.796875 25.390625
z
M 35.203125 72.90625
L 47.609375 72.90625
L 47.609375 25.390625
L 58.015625 25.390625
L 58.015625 17.1875
L 47.609375 17.1875
L 47.609375 0
L 37.796875 0
L 37.796875 17.1875
L 4.890625 17.1875
L 4.890625 26.703125
z
" id="DejaVuSans-52"></path>
</defs>
<g transform="translate(370.245638 332.342917)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-52"></use>
<use x="63.623047" xlink:href="#DejaVuSans-48"></use>
</g>
</g>
</g>
</g>
<g id="matplotlib.axis_2">
<g id="ytick_1">
<g id="line2d_6">
<defs>
<path d="M 0 0
L -3.5 0
" id="m04ebd26a8b" style="stroke:#000000;stroke-width:0.8;"></path>
</defs>
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="37.15" xlink:href="#m04ebd26a8b" y="293.870728"></use>
</g>
</g>
<g id="text_6">
<!-- −0.4 -->
<defs>
<path d="M 10.59375 35.5
L 73.1875 35.5
L 73.1875 27.203125
L 10.59375 27.203125
z
" id="DejaVuSans-8722"></path>
<path d="M 10.6875 12.40625
L 21 12.40625
L 21 0
L 10.6875 0
z
" id="DejaVuSans-46"></path>
</defs>
<g transform="translate(10.72375 296.910103)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-8722"></use>
<use x="83.789062" xlink:href="#DejaVuSans-48"></use>
<use x="147.412109" xlink:href="#DejaVuSans-46"></use>
<use x="179.199219" xlink:href="#DejaVuSans-52"></use>
</g>
</g>
</g>
<g id="ytick_2">
<g id="line2d_7">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="37.15" xlink:href="#m04ebd26a8b" y="257.416976"></use>
</g>
</g>
<g id="text_7">
<!-- −0.2 -->
<g transform="translate(10.72375 260.456351)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-8722"></use>
<use x="83.789062" xlink:href="#DejaVuSans-48"></use>
<use x="147.412109" xlink:href="#DejaVuSans-46"></use>
<use x="179.199219" xlink:href="#DejaVuSans-50"></use>
</g>
</g>
</g>
<g id="ytick_3">
<g id="line2d_8">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="37.15" xlink:href="#m04ebd26a8b" y="220.963224"></use>
</g>
</g>
<g id="text_8">
<!-- 0.0 -->
<g transform="translate(17.4275 224.002599)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-48"></use>
<use x="63.623047" xlink:href="#DejaVuSans-46"></use>
<use x="95.410156" xlink:href="#DejaVuSans-48"></use>
</g>
</g>
</g>
<g id="ytick_4">
<g id="line2d_9">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="37.15" xlink:href="#m04ebd26a8b" y="184.509471"></use>
</g>
</g>
<g id="text_9">
<!-- 0.2 -->
<g transform="translate(17.4275 187.548846)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-48"></use>
<use x="63.623047" xlink:href="#DejaVuSans-46"></use>
<use x="95.410156" xlink:href="#DejaVuSans-50"></use>
</g>
</g>
</g>
<g id="ytick_5">
<g id="line2d_10">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="37.15" xlink:href="#m04ebd26a8b" y="148.055719"></use>
</g>
</g>
<g id="text_10">
<!-- 0.4 -->
<g transform="translate(17.4275 151.095094)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-48"></use>
<use x="63.623047" xlink:href="#DejaVuSans-46"></use>
<use x="95.410156" xlink:href="#DejaVuSans-52"></use>
</g>
</g>
</g>
<g id="ytick_6">
<g id="line2d_11">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="37.15" xlink:href="#m04ebd26a8b" y="111.601967"></use>
</g>
</g>
<g id="text_11">
<!-- 0.6 -->
<defs>
<path d="M 33.015625 40.375
Q 26.375 40.375 22.484375 35.828125
Q 18.609375 31.296875 18.609375 23.390625
Q 18.609375 15.53125 22.484375 10.953125
Q 26.375 6.390625 33.015625 6.390625
Q 39.65625 6.390625 43.53125 10.953125
Q 47.40625 15.53125 47.40625 23.390625
Q 47.40625 31.296875 43.53125 35.828125
Q 39.65625 40.375 33.015625 40.375
z
M 52.59375 71.296875
L 52.59375 62.3125
Q 48.875 64.0625 45.09375 64.984375
Q 41.3125 65.921875 37.59375 65.921875
Q 27.828125 65.921875 22.671875 59.328125
Q 17.53125 52.734375 16.796875 39.40625
Q 19.671875 43.65625 24.015625 45.921875
Q 28.375 48.1875 33.59375 48.1875
Q 44.578125 48.1875 50.953125 41.515625
Q 57.328125 34.859375 57.328125 23.390625
Q 57.328125 12.15625 50.6875 5.359375
Q 44.046875 -1.421875 33.015625 -1.421875
Q 20.359375 -1.421875 13.671875 8.265625
Q 6.984375 17.96875 6.984375 36.375
Q 6.984375 53.65625 15.1875 63.9375
Q 23.390625 74.21875 37.203125 74.21875
Q 40.921875 74.21875 44.703125 73.484375
Q 48.484375 72.75 52.59375 71.296875
z
" id="DejaVuSans-54"></path>
</defs>
<g transform="translate(17.4275 114.641342)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-48"></use>
<use x="63.623047" xlink:href="#DejaVuSans-46"></use>
<use x="95.410156" xlink:href="#DejaVuSans-54"></use>
</g>
</g>
</g>
<g id="ytick_7">
<g id="line2d_12">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="37.15" xlink:href="#m04ebd26a8b" y="75.148214"></use>
</g>
</g>
<g id="text_12">
<!-- 0.8 -->
<defs>
<path d="M 31.78125 34.625
Q 24.75 34.625 20.71875 30.859375
Q 16.703125 27.09375 16.703125 20.515625
Q 16.703125 13.921875 20.71875 10.15625
Q 24.75 6.390625 31.78125 6.390625
Q 38.8125 6.390625 42.859375 10.171875
Q 46.921875 13.96875 46.921875 20.515625
Q 46.921875 27.09375 42.890625 30.859375
Q 38.875 34.625 31.78125 34.625
z
M 21.921875 38.8125
Q 15.578125 40.375 12.03125 44.71875
Q 8.5 49.078125 8.5 55.328125
Q 8.5 64.0625 14.71875 69.140625
Q 20.953125 74.21875 31.78125 74.21875
Q 42.671875 74.21875 48.875 69.140625
Q 55.078125 64.0625 55.078125 55.328125
Q 55.078125 49.078125 51.53125 44.71875
Q 48 40.375 41.703125 38.8125
Q 48.828125 37.15625 52.796875 32.3125
Q 56.78125 27.484375 56.78125 20.515625
Q 56.78125 9.90625 50.3125 4.234375
Q 43.84375 -1.421875 31.78125 -1.421875
Q 19.734375 -1.421875 13.25 4.234375
Q 6.78125 9.90625 6.78125 20.515625
Q 6.78125 27.484375 10.78125 32.3125
Q 14.796875 37.15625 21.921875 38.8125
z
M 18.3125 54.390625
Q 18.3125 48.734375 21.84375 45.5625
Q 25.390625 42.390625 31.78125 42.390625
Q 38.140625 42.390625 41.71875 45.5625
Q 45.3125 48.734375 45.3125 54.390625
Q 45.3125 60.0625 41.71875 63.234375
Q 38.140625 66.40625 31.78125 66.40625
Q 25.390625 66.40625 21.84375 63.234375
Q 18.3125 60.0625 18.3125 54.390625
z
" id="DejaVuSans-56"></path>
</defs>
<g transform="translate(17.4275 78.187589)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-48"></use>
<use x="63.623047" xlink:href="#DejaVuSans-46"></use>
<use x="95.410156" xlink:href="#DejaVuSans-56"></use>
</g>
</g>
</g>
<g id="ytick_8">
<g id="line2d_13">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="37.15" xlink:href="#m04ebd26a8b" y="38.694462"></use>
</g>
</g>
<g id="text_13">
<!-- 1.0 -->
<g transform="translate(17.4275 41.733837)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-49"></use>
<use x="63.623047" xlink:href="#DejaVuSans-46"></use>
<use x="95.410156" xlink:href="#DejaVuSans-48"></use>
</g>
</g>
</g>
</g>
<g id="LineCollection_1">
<path clip-path="url(#p627f3ac1e9)" d="M 55.915909 220.963224
L 55.915909 38.694462
" style="fill:none;stroke:#000000;stroke-width:1.5;"></path>
<path clip-path="url(#p627f3ac1e9)" d="M 63.901402 220.963224
L 63
<clippath id="p627f3ac1e9">
<rect height="293.930167" width="412.85" x="37.15" y="25.334"></rect>
</clippath>
</defs>
</svg>
</body>
</html>
</code>```

答: Since svg styles are auto generated you have to override the height and width classes. Check with developer options and apply those.</p>

Title: Angular 8 Style issue

Body:
I am building app in Angular 8 and displaying a svg image on Angular front-end which is coming from back-end using DomSanitizer. The code works absolutely fine and it is displaying the svg image to the front-end. The issue now is that when the svg image is displaying on front-end, due to this my component style(CSS) is getting affected. In more details my Navbar which was full-width of my screen initially, after the svg image loaded to frontend, then Navbar reduce it size and adding some sort of margin to its left, right and bottom.

Html:

Component.ts:

import { Component, OnInit} from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
.....

@Component({......})

export class MyComponent implements OnInit {

svg:SafeHtml;

constructor(private sanitizer: DomSanitizer) { }

 ngOnInit() {
this.svg = this.sanitizer.bypassSecurityTrustHtml('SVG CONTENT');
}

}

Once the svg image get loaded into myComponent which makes some changes to the styling and my Navbar is now not showing full screen width.

I am uploading the snapshot of my app, where you can see initially my navbar is full-width and nav-link was right align,

when the svg image loaded into then my navbar shrink add margin left, right, bottom and also nav-link content move towards left, near MyLOGO.

How to fix this issue....

SVG content:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<svg height="344.16pt" version="1.1" viewbox="0 0 460.8 344.16" width="460.8pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>

</defs>
<g id="figure_1">
<g id="patch_1">
<path d="M 0 344.16
L 460.8 344.16
L 460.8 0
L 0 0
z
" style="fill:#ffffff;"></path>
</g>
<g id="axes_1">
<g id="patch_2">
<path d="M 37.15 319.264167
L 450 319.264167
L 450 25.334
L 37.15 25.334
z
" style="fill:#ffffff;"></path>
</g>
<g id="PolyCollection_1">
<path clip-path="url(#p627f3ac1e9)" d="M 63.901402 203.218592
L 63.901402 238.707855
L 71.886896 243.150936
L 79.872389 243.22984
L 87.857882 243.28396
L 95.843375 244.251805
L 103.828868 246.769011
L 111.814362 249.295215
L 119.799855 251.587942
L 127.785348 252.151143
L 135.770841 252.192877
L 143.756335 252.465754
L 151.741828 253.684624
L 159.727321 256.558405
L 167.712814 257.430179
L 175.698308 257.477646
L 183.683801 257.480979
L 191.669294 257.798929
L 199.654787 259.052734
L 207.64028 260.106632
L 215.625774 260.678653
L 223.611267 260.77239
L 231.59676 260.839193
L 239.582253 261.013043
L 247.567747 261.495237
L 255.55324 262.446651
L 263.538733 262.825749
L 271.524226 262.839165
L 279.50972 262.841801
L 287.495213 263.021195
L 295.480706 263.606824
L 303.466199 264.034256
L 311.451692 264.272128
L 319.437186 264.313946
L 327.422679 264.40439
L 335.408172 264.616897
L 343.393665 264.902244
L 351.379159 265.249418
L 359.364652 265.339262
L 367.350145 265.344617
L 375.335638 265.355031
L 383.321132 265.397175
L 391.306625 265.509928
L 399.292118 265.640043
L 407.277611 265.724146
L 415.263104 265.726199
L 423.248598 265.763521
L 431.234091 265.809885
L 431.234091 176.116562
L 431.234091 176.116562
L 423.248598 176.162926
L 415.263104 176.200248
L 407.277611 176.202301
L 399.292118 176.286404
L 391.306625 176.416519
L 383.321132 176.529272
L 375.335638 176.571416
L 367.350145 176.58183
L 359.364652 176.587185
L 351.379159 176.677029
L 343.393665 177.024203
L 335.408172 177.30955
L 327.422679 177.522057
L 319.437186 177.612501
L 311.451692 177.654319
L 303.466199 177.892191
L 295.480706 178.319623
L 287.495213 178.905252
L 279.50972 179.084646
L 271.524226 179.087282
L 263.538733 179.100698
L 255.55324 179.479796
L 247.567747 180.43121
L 239.582253 180.913404
L 231.59676 181.087254
L 223.611267 181.154057
L 215.625774 181.247794
L 207.64028 181.819815
L 199.654787 182.873713
L 191.669294 184.127518
L 183.683801 184.445468
L 175.698308 184.448801
L 167.712814 184.496268
L 159.727321 185.368042
L 151.741828 188.241823
L 143.756335 189.460693
L 135.770841 189.73357
L 127.785348 189.775304
L 119.799855 190.338505
L 111.814362 192.631232
L 103.828868 195.157436
L 95.843375 197.674642
L 87.857882 198.642487
L 79.872389 198.696607
L 71.886896 198.775511
L 63.901402 203.218592
z
" style="fill:#1f77b4;fill-opacity:0.25;"></path>
</g>
<g id="matplotlib.axis_1">
<g id="xtick_1">
<g id="line2d_1">
<defs>
<path d="M 0 0
L 0 3.5
" id="m50ec2796b5" style="stroke:#000000;stroke-width:0.8;"></path>
</defs>
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="55.915909" xlink:href="#m50ec2796b5" y="319.264167"></use>
</g>
</g>
<g id="text_1">

<defs>
<path d="M 31.78125 66.40625
Q 24.171875 66.40625 20.328125 58.90625
Q 16.5 51.421875 16.5 36.375
Q 16.5 21.390625 20.328125 13.890625
Q 24.171875 6.390625 31.78125 6.390625
Q 39.453125 6.390625 43.28125 13.890625
Q 47.125 21.390625 47.125 36.375
Q 47.125 51.421875 43.28125 58.90625
Q 39.453125 66.40625 31.78125 66.40625
z
M 31.78125 74.21875
Q 44.046875 74.21875 50.515625 64.515625
Q 56.984375 54.828125 56.984375 36.375
Q 56.984375 17.96875 50.515625 8.265625
Q 44.046875 -1.421875 31.78125 -1.421875
Q 19.53125 -1.421875 13.0625 8.265625
Q 6.59375 17.96875 6.59375 36.375
Q 6.59375 54.828125 13.0625 64.515625
Q 19.53125 74.21875 31.78125 74.21875
z
" id="DejaVuSans-48"></path>
</defs>
<g transform="translate(53.370909 332.342917)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-48"></use>
</g>
</g>
</g>
<g id="xtick_2">
<g id="line2d_2">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="135.770841" xlink:href="#m50ec2796b5" y="319.264167"></use>
</g>
</g>
<g id="text_2">

<defs>
<path d="M 12.40625 8.296875
L 28.515625 8.296875
L 28.515625 63.921875
L 10.984375 60.40625
L 10.984375 69.390625
L 28.421875 72.90625
L 38.28125 72.90625
L 38.28125 8.296875
L 54.390625 8.296875
L 54.390625 0
L 12.40625 0
z
" id="DejaVuSans-49"></path>
</defs>
<g transform="translate(130.680841 332.342917)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-49"></use>
<use x="63.623047" xlink:href="#DejaVuSans-48"></use>
</g>
</g>
</g>
<g id="xtick_3">
<g id="line2d_3">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="215.625774" xlink:href="#m50ec2796b5" y="319.264167"></use>
</g>
</g>
<g id="text_3">

<defs>
<path d="M 19.1875 8.296875
L 53.609375 8.296875
L 53.609375 0
L 7.328125 0
L 7.328125 8.296875
Q 12.9375 14.109375 22.625 23.890625
Q 32.328125 33.6875 34.8125 36.53125
Q 39.546875 41.84375 41.421875 45.53125
Q 43.3125 49.21875 43.3125 52.78125
Q 43.3125 58.59375 39.234375 62.25
Q 35.15625 65.921875 28.609375 65.921875
Q 23.96875 65.921875 18.8125 64.3125
Q 13.671875 62.703125 7.8125 59.421875
L 7.8125 69.390625
Q 13.765625 71.78125 18.9375 73
Q 24.125 74.21875 28.421875 74.21875
Q 39.75 74.21875 46.484375 68.546875
Q 53.21875 62.890625 53.21875 53.421875
Q 53.21875 48.921875 51.53125 44.890625
Q 49.859375 40.875 45.40625 35.40625
Q 44.1875 33.984375 37.640625 27.21875
Q 31.109375 20.453125 19.1875 8.296875
z
" id="DejaVuSans-50"></path>
</defs>
<g transform="translate(210.535774 332.342917)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-50"></use>
<use x="63.623047" xlink:href="#DejaVuSans-48"></use>
</g>
</g>
</g>
<g id="xtick_4">
<g id="line2d_4">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="295.480706" xlink:href="#m50ec2796b5" y="319.264167"></use>
</g>
</g>
<g id="text_4">

<defs>
<path d="M 40.578125 39.3125
Q 47.65625 37.796875 51.625 33
Q 55.609375 28.21875 55.609375 21.1875
Q 55.609375 10.40625 48.1875 4.484375
Q 40.765625 -1.421875 27.09375 -1.421875
Q 22.515625 -1.421875 17.65625 -0.515625
Q 12.796875 0.390625 7.625 2.203125
L 7.625 11.71875
Q 11.71875 9.328125 16.59375 8.109375
Q 21.484375 6.890625 26.8125 6.890625
Q 36.078125 6.890625 40.9375 10.546875
Q 45.796875 14.203125 45.796875 21.1875
Q 45.796875 27.640625 41.28125 31.265625
Q 36.765625 34.90625 28.71875 34.90625
L 20.21875 34.90625
L 20.21875 43.015625
L 29.109375 43.015625
Q 36.375 43.015625 40.234375 45.921875
Q 44.09375 48.828125 44.09375 54.296875
Q 44.09375 59.90625 40.109375 62.90625
Q 36.140625 65.921875 28.71875 65.921875
Q 24.65625 65.921875 20.015625 65.03125
Q 15.375 64.15625 9.8125 62.3125
L 9.8125 71.09375
Q 15.4375 72.65625 20.34375 73.4375
Q 25.25 74.21875 29.59375 74.21875
Q 40.828125 74.21875 47.359375 69.109375
Q 53.90625 64.015625 53.90625 55.328125
Q 53.90625 49.265625 50.4375 45.09375
Q 46.96875 40.921875 40.578125 39.3125
z
" id="DejaVuSans-51"></path>
</defs>
<g transform="translate(290.390706 332.342917)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-51"></use>
<use x="63.623047" xlink:href="#DejaVuSans-48"></use>
</g>
</g>
</g>
<g id="xtick_5">
<g id="line2d_5">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="375.335638" xlink:href="#m50ec2796b5" y="319.264167"></use>
</g>
</g>
<g id="text_5">

<defs>
<path d="M 37.796875 64.3125
L 12.890625 25.390625
L 37.796875 25.390625
z
M 35.203125 72.90625
L 47.609375 72.90625
L 47.609375 25.390625
L 58.015625 25.390625
L 58.015625 17.1875
L 47.609375 17.1875
L 47.609375 0
L 37.796875 0
L 37.796875 17.1875
L 4.890625 17.1875
L 4.890625 26.703125
z
" id="DejaVuSans-52"></path>
</defs>
<g transform="translate(370.245638 332.342917)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-52"></use>
<use x="63.623047" xlink:href="#DejaVuSans-48"></use>
</g>
</g>
</g>
</g>
<g id="matplotlib.axis_2">
<g id="ytick_1">
<g id="line2d_6">
<defs>
<path d="M 0 0
L -3.5 0
" id="m04ebd26a8b" style="stroke:#000000;stroke-width:0.8;"></path>
</defs>
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="37.15" xlink:href="#m04ebd26a8b" y="293.870728"></use>
</g>
</g>
<g id="text_6">

<defs>
<path d="M 10.59375 35.5
L 73.1875 35.5
L 73.1875 27.203125
L 10.59375 27.203125
z
" id="DejaVuSans-8722"></path>
<path d="M 10.6875 12.40625
L 21 12.40625
L 21 0
L 10.6875 0
z
" id="DejaVuSans-46"></path>
</defs>
<g transform="translate(10.72375 296.910103)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-8722"></use>
<use x="83.789062" xlink:href="#DejaVuSans-48"></use>
<use x="147.412109" xlink:href="#DejaVuSans-46"></use>
<use x="179.199219" xlink:href="#DejaVuSans-52"></use>
</g>
</g>
</g>
<g id="ytick_2">
<g id="line2d_7">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="37.15" xlink:href="#m04ebd26a8b" y="257.416976"></use>
</g>
</g>
<g id="text_7">

<g transform="translate(10.72375 260.456351)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-8722"></use>
<use x="83.789062" xlink:href="#DejaVuSans-48"></use>
<use x="147.412109" xlink:href="#DejaVuSans-46"></use>
<use x="179.199219" xlink:href="#DejaVuSans-50"></use>
</g>
</g>
</g>
<g id="ytick_3">
<g id="line2d_8">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="37.15" xlink:href="#m04ebd26a8b" y="220.963224"></use>
</g>
</g>
<g id="text_8">

<g transform="translate(17.4275 224.002599)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-48"></use>
<use x="63.623047" xlink:href="#DejaVuSans-46"></use>
<use x="95.410156" xlink:href="#DejaVuSans-48"></use>
</g>
</g>
</g>
<g id="ytick_4">
<g id="line2d_9">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="37.15" xlink:href="#m04ebd26a8b" y="184.509471"></use>
</g>
</g>
<g id="text_9">

<g transform="translate(17.4275 187.548846)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-48"></use>
<use x="63.623047" xlink:href="#DejaVuSans-46"></use>
<use x="95.410156" xlink:href="#DejaVuSans-50"></use>
</g>
</g>
</g>
<g id="ytick_5">
<g id="line2d_10">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="37.15" xlink:href="#m04ebd26a8b" y="148.055719"></use>
</g>
</g>
<g id="text_10">

<g transform="translate(17.4275 151.095094)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-48"></use>
<use x="63.623047" xlink:href="#DejaVuSans-46"></use>
<use x="95.410156" xlink:href="#DejaVuSans-52"></use>
</g>
</g>
</g>
<g id="ytick_6">
<g id="line2d_11">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="37.15" xlink:href="#m04ebd26a8b" y="111.601967"></use>
</g>
</g>
<g id="text_11">

<defs>
<path d="M 33.015625 40.375
Q 26.375 40.375 22.484375 35.828125
Q 18.609375 31.296875 18.609375 23.390625
Q 18.609375 15.53125 22.484375 10.953125
Q 26.375 6.390625 33.015625 6.390625
Q 39.65625 6.390625 43.53125 10.953125
Q 47.40625 15.53125 47.40625 23.390625
Q 47.40625 31.296875 43.53125 35.828125
Q 39.65625 40.375 33.015625 40.375
z
M 52.59375 71.296875
L 52.59375 62.3125
Q 48.875 64.0625 45.09375 64.984375
Q 41.3125 65.921875 37.59375 65.921875
Q 27.828125 65.921875 22.671875 59.328125
Q 17.53125 52.734375 16.796875 39.40625
Q 19.671875 43.65625 24.015625 45.921875
Q 28.375 48.1875 33.59375 48.1875
Q 44.578125 48.1875 50.953125 41.515625
Q 57.328125 34.859375 57.328125 23.390625
Q 57.328125 12.15625 50.6875 5.359375
Q 44.046875 -1.421875 33.015625 -1.421875
Q 20.359375 -1.421875 13.671875 8.265625
Q 6.984375 17.96875 6.984375 36.375
Q 6.984375 53.65625 15.1875 63.9375
Q 23.390625 74.21875 37.203125 74.21875
Q 40.921875 74.21875 44.703125 73.484375
Q 48.484375 72.75 52.59375 71.296875
z
" id="DejaVuSans-54"></path>
</defs>
<g transform="translate(17.4275 114.641342)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-48"></use>
<use x="63.623047" xlink:href="#DejaVuSans-46"></use>
<use x="95.410156" xlink:href="#DejaVuSans-54"></use>
</g>
</g>
</g>
<g id="ytick_7">
<g id="line2d_12">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="37.15" xlink:href="#m04ebd26a8b" y="75.148214"></use>
</g>
</g>
<g id="text_12">

<defs>
<path d="M 31.78125 34.625
Q 24.75 34.625 20.71875 30.859375
Q 16.703125 27.09375 16.703125 20.515625
Q 16.703125 13.921875 20.71875 10.15625
Q 24.75 6.390625 31.78125 6.390625
Q 38.8125 6.390625 42.859375 10.171875
Q 46.921875 13.96875 46.921875 20.515625
Q 46.921875 27.09375 42.890625 30.859375
Q 38.875 34.625 31.78125 34.625
z
M 21.921875 38.8125
Q 15.578125 40.375 12.03125 44.71875
Q 8.5 49.078125 8.5 55.328125
Q 8.5 64.0625 14.71875 69.140625
Q 20.953125 74.21875 31.78125 74.21875
Q 42.671875 74.21875 48.875 69.140625
Q 55.078125 64.0625 55.078125 55.328125
Q 55.078125 49.078125 51.53125 44.71875
Q 48 40.375 41.703125 38.8125
Q 48.828125 37.15625 52.796875 32.3125
Q 56.78125 27.484375 56.78125 20.515625
Q 56.78125 9.90625 50.3125 4.234375
Q 43.84375 -1.421875 31.78125 -1.421875
Q 19.734375 -1.421875 13.25 4.234375
Q 6.78125 9.90625 6.78125 20.515625
Q 6.78125 27.484375 10.78125 32.3125
Q 14.796875 37.15625 21.921875 38.8125
z
M 18.3125 54.390625
Q 18.3125 48.734375 21.84375 45.5625
Q 25.390625 42.390625 31.78125 42.390625
Q 38.140625 42.390625 41.71875 45.5625
Q 45.3125 48.734375 45.3125 54.390625
Q 45.3125 60.0625 41.71875 63.234375
Q 38.140625 66.40625 31.78125 66.40625
Q 25.390625 66.40625 21.84375 63.234375
Q 18.3125 60.0625 18.3125 54.390625
z
" id="DejaVuSans-56"></path>
</defs>
<g transform="translate(17.4275 78.187589)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-48"></use>
<use x="63.623047" xlink:href="#DejaVuSans-46"></use>
<use x="95.410156" xlink:href="#DejaVuSans-56"></use>
</g>
</g>
</g>
<g id="ytick_8">
<g id="line2d_13">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="37.15" xlink:href="#m04ebd26a8b" y="38.694462"></use>
</g>
</g>
<g id="text_13">

<g transform="translate(17.4275 41.733837)scale(0.08 -0.08)">
<use xlink:href="#DejaVuSans-49"></use>
<use x="63.623047" xlink:href="#DejaVuSans-46"></use>
<use x="95.410156" xlink:href="#DejaVuSans-48"></use>
</g>
</g>
</g>
</g>
<g id="LineCollection_1">
<path clip-path="url(#p627f3ac1e9)" d="M 55.915909 220.963224
L 55.915909 38.694462
" style="fill:none;stroke:#000000;stroke-width:1.5;"></path>
<path clip-path="url(#p627f3ac1e9)" d="M 63.901402 220.963224
L 63
<clippath id="p627f3ac1e9">
<rect height="293.930167" width="412.85" x="37.15" y="25.334"></rect>
</clippath>
</defs>
</svg>


来源: stackexchange

问:
How do I create a multi-select header filter in tabulator?
This question has been asked several times in various forms over the years in the Tabulator GitHub repository. Here are a few instances:
https://github.com/olifolkerd/tabulator/issues/527, https://github.com/olifolkerd/tabulator/issues/1759

I'm looking for an example of how to achieve this using a dropdown menu of some form --- ideally as described in #1759 (dropdown with checkboxes) but another solution that would work for us is a "select" editor that adds/removes CSVs in the header filter when a value is selected/deselected (extending on the example provided in #527).

Hopefully someone with experience working with custom header filters / editors in tabulator can provide an example of a multi-select header filter dropdown, but if not, then I will post a JSFiddle link myself once I've got something that works.

答:
See my answer to Tabulator Multiple Filter in the same Column (show dropbox)

Extend as you see fit...

I dont think <select> support checkboxes as <option>'s, but it would be trivial to replace the <select> with a different style of "pulldown" that does.

ContentLicense: CC BY-SA 4.0


问:
How to map layouts between PowerPoint PPTX templates with python-pptx?
Here is what I am trying to learn how to do:

The company I work for has approx. 120+.pptx files that were all created manually over several years using a .potx PowerPoint template

A graphics designer created a snazzy new template

My boss assigned me the task of converting all 120+ decks from the outdated template into the new one

The old template had a dozen or so custom layouts w/ names like: Title Slide, Intro Slide, Generic Process, Blank, Comparison [...] The new template has updated layouts w/ the same names (roughly). In the XML data, I'm sure there is some kind of <layout_id> for each layout. I was hoping to be able to work with Python to extract what I need from the old presentations and generate new presentations with that data, but with the new layouts.

I have read through all the interactions on the python-pptx GitHub repository and watched this YouTube video on creating new Presentations using an existing template. Despite a full day of trial and much error, I am simply not far enough along in my learning get this project under control.
Obviously, I do not expect full details, but any nudge(s) in the right direction would be incredibly appreciated.

答:
Well, I expect there are several challenges ahead of you to get this working, and SO is a single-question/single-answer kind of place, so let's narrow this down to a first question which we can call "Mapping layouts between PPTX templates with python-pptx". It might be worth considering changing the question title to something like that.

You can of course ask further focused questions at your next step and the one after that, etc.

My understanding of the first problem is this:

For each slide in a source presentation, create a slide in a target presentation using the new-version slide layout that corresponds to the source slide layout.

I'm inclined to think this reduces to a function like this:

```<code>layout_map = {
    "Title Slide": "Title",
    "Intro Slide": "Introduction",
    "Generic Process": "Process",
    ...
}

def corresponding_slide_layout(slide, new_prs):
    legacy_layout_name = slide.slide_layout.name
    new_name = layout_map.get(legacy_layout_name)
    if new_name is None:
        # --- there's a gap in the mapping ---
        return None
    return new_prs.slide_layouts.get_by_name(new_name)

new_prs = Presentation("my-new-template.pptx")
for slide in prs.slides:
    layout = corresponding_slide_layout(slide, new_prs)
    if layout is None:
        layout = new_prs.slide_layouts[5]  # --- or whatever default ---
    new_slide = new_prs.slides.add_slide(layout)
    # --- then pass to other function you write to do the shape copying ---
    copy_slide_contents(slide, new_slide)
</code>```

The general gist is that you map old-style layouts to new-style layouts by name and then use that mapping to choose the layout for each target slide. This should be pretty reliable with the possible addition of a default where there is either no clear mapping or perhaps a user edited an original name or something.

Body:
Well, I expect there are several challenges ahead of you to get this working, and SO is a single-question/single-answer kind of place, so let's narrow this down to a first question which we can call "Mapping layouts between PPTX templates with python-pptx". It might be worth considering changing the question title to something like that.

You can of course ask further focused questions at your next step and the one after that, etc.

My understanding of the first problem is this:

For each slide in a source presentation, create a slide in a target presentation using the new-version slide layout that corresponds to the source slide layout.

I'm inclined to think this reduces to a function like this:

layout_map = {
    "Title Slide": "Title",
    "Intro Slide": "Introduction",
    "Generic Process": "Process",
    ...
}

def corresponding_slide_layout(slide, new_prs):
    legacy_layout_name = slide.slide_layout.name
    new_name = layout_map.get(legacy_layout_name)
    if new_name is None:
        # --- there's a gap in the mapping ---
        return None
    return new_prs.slide_layouts.get_by_name(new_name)

new_prs = Presentation("my-new-template.pptx")
for slide in prs.slides:
    layout = corresponding_slide_layout(slide, new_prs)
    if layout is None:
        layout = new_prs.slide_layouts[5]  # --- or whatever default ---
    new_slide = new_prs.slides.add_slide(layout)
    # --- then pass to other function you write to do the shape copying ---
    copy_slide_contents(slide, new_slide)

The general gist is that you map old-style layouts to new-style layouts by name and then use that mapping to choose the layout for each target slide. This should be pretty reliable with the possible addition of a default where there is either no clear mapping or perhaps a user edited an original name or something.


问:
Is there a fast and non-fancy C# code/algorithm to compress a string of comma separated digits close to maximum info density?
In a nutshell, I programmed myself into a corner by creating a CLR aggregate that performs row id concatenation, so I say:

```<code>select SumKeys(id), name from SomeTable where name='multiple rows named this'
</code>```

and I get something like:

```<code>SumKeys         name
--------        ---------
1,4,495         multiple rows named this
</code>```

But it dies when SumKeys gets > 8000 chars and I don't think I can do anything about it.

As a quick fix (it's only failing 1% of the time for my application) I thought I might compress the string down and I thought some of you bright people out there might know a slick way to do this.

Something like base64 made for 0-9 and a comma?

答:
You can use a Huffman tree. This is basically an algorithm to compress ascii into binary. I was told that it is basically what WinZIP uses, but I'm not sure if that is really true or not. I did a quick search for huffman coding c# and there seems to be at least one decent implementation out there, though I haven't used any of them.

If your "vocabulary" is just digits and commas, a Hoffman tree will get you very good compression.

http://www.enusbaum.com/blog/2009/05/22/example-huffman-compression-routine-in-c/

ContentLicense: CC BY-SA 3.0

Body:
In a nutshell, I programmed myself into a corner by creating a CLR aggregate that performs row id concatenation, so I say:

select SumKeys(id), name from SomeTable where name='multiple rows named this'

and I get something like:

SumKeys         name
--------        ---------
1,4,495         multiple rows named this

But it dies when SumKeys gets > 8000 chars and I don't think I can do anything about it.

As a quick fix (it's only failing 1% of the time for my application) I thought I might compress the string down and I thought some of you bright people out there might know a slick way to do this.

Something like base64 made for 0-9 and a comma?


问:
Maven build is not using the updated version of model(pom.xml)
I have a maven project which I do get the new project version from user with:

```<code>Current Version = 1.0.0
<plugin>
    <groupId>org.codehaus.mojo</groupId>
    <artifactId>versions-maven-plugin</artifactId>
    <version>2.7</version>
    <executions>
        <execution>
            <phase>validate</phase>
                    <goals>
                        <goal>set</goal>
                    </goals>
            </execution>
        </executions>
    </plugin>
Current Version = 2.0.0
</code>```

and after that I called my own custom plugin, which runs set of calculations and appends an String to  the version

```<code>Current Version = 2.0.0
<groupId>mygroup</groupId>
    <artifactId>my artifact</artifactId>
    <version>1.0.0</version>
    <executions>
       <execution>
        <phase>process-sources</phase>
            <goals>
                <goal>validate</goal>
            </goals>
        </execution>
    </executions>
Current Version = 2.0.0-AddedString
</code>```

but when I run other plugins, for example:

```<code><groupId>com.github.ekryd.echo-maven-plugin</groupId>
    <artifactId>echo-maven-plugin</artifactId>
        <executions>
        <execution>
            <id>end</id>
            <goals>
            <goal>echo</goal>
            </goals>
            <phase>process-resources</phase>
            <configuration>
            <message>${project.version}</message>
            </configuration>
     </execution>
</executions>
</code>```

which gives me the result of : "1.0.0" which should be  "2.0.0-AddedString"

but why?
and how to fix this? I need all plugins use the new version and work with that.

答:
You need separate Maven runs for that.

If you run something like mvn versions:set -DnewVersion=2.0.0 my:plugin, then my:plugin will see the version as it was before starting the command, not the 2.0.0 that was set in between.

So when you have goals that change the POM, you need to call them in separate Maven runs, i.e. first mvn versions:set -DnewVersion=2.0.0 and then mvn my:plugin.

Body:
I have a maven project which I do get the new project version from user with:

Current Version = 1.0.0
<plugin>
    <groupId>org.codehaus.mojo</groupId>
    <artifactId>versions-maven-plugin</artifactId>
    <version>2.7</version>
    <executions>
        <execution>
            <phase>validate</phase>
                    <goals>
                        <goal>set</goal>
                    </goals>
            </execution>
        </executions>
    </plugin>
Current Version = 2.0.0

and after that I called my own custom plugin, which runs set of calculations and appends an String to  the version

Current Version = 2.0.0
<groupId>mygroup</groupId>
    <artifactId>my artifact</artifactId>
    <version>1.0.0</version>
    <executions>
       <execution>
        <phase>process-sources</phase>
            <goals>
                <goal>validate</goal>
            </goals>
        </execution>
    </executions>
Current Version = 2.0.0-AddedString

but when I run other plugins, for example:

<groupId>com.github.ekryd.echo-maven-plugin</groupId>
    <artifactId>echo-maven-plugin</artifactId>
        <executions>
        <execution>
            <id>end</id>
            <goals>
            <goal>echo</goal>
            </goals>
            <phase>process-resources</phase>
            <configuration>
            <message>${project.version}</message>
            </configuration>
     </execution>
</executions>

which gives me the result of : "1.0.0" which should be  "2.0.0-AddedString"

but why?
and how to fix this? I need all plugins use the new version and work with that.


问:
Timestamp with a millisecond precision: How to save them in MySQL
I have to develop a application using MySQL and I have to save values like "1412792828893" which represent a timestamp but with a precision of a millisecond. That is, the amount of milliseconds since 1.1.1970. I declare the row as timestamp but unfortunately this didn't work. All values are set to 0000-00-00 00:00:00

```<code>CREATE TABLE IF NOT EXISTS `probability` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`segment_id` int(11) NOT NULL,
`probability` float NOT NULL,
`measured_at` timestamp NOT NULL,
`provider_id` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ;
</code>```

How should be the declaration in order to be able to save timestamp values with this precision?

答:
You can use BIGINT as follows:</p>

```<code>CREATE TABLE user_reg (
user_id INT NOT NULL AUTO_INCREMENT,
identifier INT,
phone_number CHAR(11) NOT NULL,
verified TINYINT UNSIGNED NOT NULL,
reg_time BIGINT,
last_active_time BIGINT,
PRIMARY KEY (user_id),
INDEX (phone_number, user_id, identifier)
   );
</code>```

Body:
I have to develop a application using MySQL and I have to save values like "1412792828893" which represent a timestamp but with a precision of a millisecond. That is, the amount of milliseconds since 1.1.1970. I declare the row as timestamp but unfortunately this didn't work. All values are set to 0000-00-00 00:00:00

CREATE TABLE IF NOT EXISTS `probability` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`segment_id` int(11) NOT NULL,
`probability` float NOT NULL,
`measured_at` timestamp NOT NULL,
`provider_id` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ;

How should be the declaration in order to be able to save timestamp values with this precision?

Body:
You can use BIGINT as follows:

CREATE TABLE user_reg (
user_id INT NOT NULL AUTO_INCREMENT,
identifier INT,
phone_number CHAR(11) NOT NULL,
verified TINYINT UNSIGNED NOT NULL,
reg_time BIGINT,
last_active_time BIGINT,
PRIMARY KEY (user_id),
INDEX (phone_number, user_id, identifier)
   );


问:
Fatal error: Allowed memory size exhausted after MAMP update
I know this question can be found a lot of time on this forum and the internet. But I can't seem to find the answer to my specific question.

I'm running a Drupal website, and since the update of MAMP from 5.5 to 5.6 I get the following error:
Fatal error: Allowed memory size of 1610612736 bytes exhausted (tried to allocate 4096 bytes) when running a composer require in the terminal.

I updated the php.ini tot 1024MB instead of 128MB of the current php version I'm running via MAMP. When I add a php file to my root with <?php phpinfo(); ?> I see that the memory is like I want so 1024MB. When I look at the location of the php ini file I see it is in the MAMP folder.

But I still get the error. When I run this php -r "echo ini_get('memory_limit').PHP_EOL;" in my terminal I see the 128MB again. When I try to find the php ini that is running using
php -i|grep 'php.ini' I get:

```<code>Configuration File (php.ini) Path => /etc
</code>```

So it looks like the php.ini file is somewhere else. But I don't know where and can't change it. How can I solve this?

I also tried changing the composer memory using php -d memory_limit=-1 /usr/bin/composer but this didn't solve the problem either.

My question is, how can I solve this problem? How can I find the php.ini file that is used. Or how can I change the memory limit?

Update:

Running php -i | grep 'Configuration File' in the terminal ouputs:

```<code>Loaded Configuration File => (none)
</code>```

And maybe good to know that I have the option Make this version available for command line enabled on the MAMP php section.

答:
I ended up adding a php.ini file to the /etc folder on my computer. This way the php memory_limit raise did work. And checking it in the terminal did show me the right value. But as Alister already said, this didn't fix the problem. The problem was not in the php.ini memory_limit.

I found out that using COMPOSER_MEMORY_LIMIT=-1 in the terminal at the beginning of my session put the memory limit to unlimited during that terminal session. This fixed the problem.

After that I added, alias composer="COMPOSER_MEMORY_LIMIT=-1 composer" to my bash file and know everything is working like I would expect.

Body:
I know this question can be found a lot of time on this forum and the internet. But I can't seem to find the answer to my specific question.

I'm running a Drupal website, and since the update of MAMP from 5.5 to 5.6 I get the following error:
Fatal error: Allowed memory size of 1610612736 bytes exhausted (tried to allocate 4096 bytes) when running a composer require in the terminal.

I updated the php.ini tot 1024MB instead of 128MB of the current php version I'm running via MAMP. When I add a php file to my root with <?php phpinfo(); ?> I see that the memory is like I want so 1024MB. When I look at the location of the php ini file I see it is in the MAMP folder.

But I still get the error. When I run this php -r "echo ini_get('memory_limit').PHP_EOL;" in my terminal I see the 128MB again. When I try to find the php ini that is running using
php -i|grep 'php.ini' I get:

Configuration File (php.ini) Path => /etc

So it looks like the php.ini file is somewhere else. But I don't know where and can't change it. How can I solve this?

I also tried changing the composer memory using php -d memory_limit=-1 /usr/bin/composer but this didn't solve the problem either.

My question is, how can I solve this problem? How can I find the php.ini file that is used. Or how can I change the memory limit?

Update:

Running php -i | grep 'Configuration File' in the terminal ouputs:

Loaded Configuration File => (none)

And maybe good to know that I have the option Make this version available for command line enabled on the MAMP php section.


问:
Encoding problem using new line command in perl
The program works as long as I only print the special characters. But I want them to be separated and sorted. With the new line command the characters change into question marks. Can someone tell me why and how to solve this problem?</p>

```<code>#!/usr/bin/perl

while (<>) {
  while (/(.)/g) {
    if (ord($1) >= 128){
       print "$1\n";
    }
  }
}
</code>```

答:
You use UNIX system, it is not clear what terminal and what settings for LOCALE you have in your environment.

Depending on LOCALE settings not all symbols will be printable to console and you would see ? instead. Some symbols are not intended to be printed at all (control symbols which can not be visualized).

You have two options:

adjust LOCALE settings to match characters used

re-encode input and output to supported by LOCALE

Also your code probably would be easier to read in following form

```<code>use strict;
use warnings;
use feature 'say';

my $debug = 0;

while (<DATA>) {
    chomp;
    say     if $debug;
    map{ my $d = ord; print "[$d]" } split '';
    say ''  if $debug;;
}

__DATA__
use strict;
use warnings;
use feature 'say';

while (<>) {
    say;
    map{ my $d = ord; print "[$d]" if $d >= 128 } split '', $_;
}
</code>```

Body:
The program works as long as I only print the special characters. But I want them to be separated and sorted. With the new line command the characters change into question marks. Can someone tell me why and how to solve this problem?

#!/usr/bin/perl

while (<>) {
  while (/(.)/g) {
    if (ord($1) >= 128){
       print "$1\n";
    }
  }
}

Body:
You use UNIX system, it is not clear what terminal and what settings for LOCALE you have in your environment.

Depending on LOCALE settings not all symbols will be printable to console and you would see ? instead. Some symbols are not intended to be printed at all (control symbols which can not be visualized).

You have two options:

adjust LOCALE settings to match characters used

re-encode input and output to supported by LOCALE

Also your code probably would be easier to read in following form

use strict;
use warnings;
use feature 'say';

my $debug = 0;

while (<DATA>) {
    chomp;
    say     if $debug;
    map{ my $d = ord; print "[$d]" } split '';
    say ''  if $debug;;
}

__DATA__
use strict;
use warnings;
use feature 'say';

while (<>) {
    say;
    map{ my $d = ord; print "[$d]" if $d >= 128 } split '', $_;
}


问:
casting 'findViewByld(...)' to 'EditText' is redundant
In the line txtPass=(EditText) findViewById(R.id.txtPass); it says casting 'findViewByld(...)' to 'EditText' is redundant. How do I fix this?

```<code>
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.Button;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;

public class datainsert extends AppCompatActivity {
EditText txtPass, txtName, txtNum, txtEmail;
Button btnLogin, btnSignUp;
DatabaseReference reff;
Member member;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.signup);
        txtPass=(EditText) findViewById(R.id.txtPass);
        txtName=(EditText)findViewById(R.id.txtName);
        txtNum=(EditText)findViewById(R.id.txtNum);
        txtEmail=(EditText)findViewById(R.id.txtEmail);
        btnLogin=(Button)findViewById(R.id.btnLogin);
        btnSignUp=(Button)findViewById(R.id.btnSignUp);
        reff= FirebaseDatabase.getInstance().getReference().child("Member");
        member=new Member();
        btnSignUp.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Float agea=Float.parseFloat(txtPass.getText().toString().trim());
                Float hit= Float.parseFloat(txtName.getText().toString().trim());
                Float dsa= Float.parseFloat(txtEmail.getText().toString().trim());
                Long phn=Long.parseLong(txtNum.getText().toString().trim());

                member.setName(txtName.getText().toString().trim());
                member.setEmail(txtEmail.getText().toString().trim());
                member.setHt(dsa);
                member.setHm(hit);
                member.setPh(phn);
                member.setHt(agea);
                reff.push().setValue(member);
                Toast.makeText(datainsert.this,"data inserted sucessfully",Toast.LENGTH_LONG).show();
            }
            });
    }
}```
```

答:
Just remove the cast to remove the warning:

```<code>txtPass = findViewById(R.id.txtPass);
</code>```

Java figured out what you wanted from findViewById, so there's no need to cast it.  The message is not really an error (the existing code will compile and run just fine), so there's no harm in leaving it in.  It's considered better style to remove redundancies.

Body:
In the line txtPass=(EditText) findViewById(R.id.txtPass); it says casting 'findViewByld(...)' to 'EditText' is redundant. How do I fix this?

import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.Button;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;

public class datainsert extends AppCompatActivity {
EditText txtPass, txtName, txtNum, txtEmail;
Button btnLogin, btnSignUp;
DatabaseReference reff;
Member member;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.signup);
        txtPass=(EditText) findViewById(R.id.txtPass);
        txtName=(EditText)findViewById(R.id.txtName);
        txtNum=(EditText)findViewById(R.id.txtNum);
        txtEmail=(EditText)findViewById(R.id.txtEmail);
        btnLogin=(Button)findViewById(R.id.btnLogin);
        btnSignUp=(Button)findViewById(R.id.btnSignUp);
        reff= FirebaseDatabase.getInstance().getReference().child("Member");
        member=new Member();
        btnSignUp.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Float agea=Float.parseFloat(txtPass.getText().toString().trim());
                Float hit= Float.parseFloat(txtName.getText().toString().trim());
                Float dsa= Float.parseFloat(txtEmail.getText().toString().trim());
                Long phn=Long.parseLong(txtNum.getText().toString().trim());

                member.setName(txtName.getText().toString().trim());
                member.setEmail(txtEmail.getText().toString().trim());
                member.setHt(dsa);
                member.setHm(hit);
                member.setPh(phn);
                member.setHt(agea);
                reff.push().setValue(member);
                Toast.makeText(datainsert.this,"data inserted sucessfully",Toast.LENGTH_LONG).show();
            }
            });
    }
}```

Body:
Just remove the cast to remove the warning:

txtPass = findViewById(R.id.txtPass);

Java figured out what you wanted from findViewById, so there's no need to cast it.  The message is not really an error (the existing code will compile and run just fine), so there's no harm in leaving it in.  It's considered better style to remove redundancies.


问:
MySQL Query returns duplicates
I am very new to SQL

when I execute the below query it returns the following results:

```<code>SELECT table1.image_name, table1.item_id
FROM table1, table2, table3
WHERE table2.catagory="item"
AND table3.account_id=59

image_name    image_id
-------------------------
d9.jpg      89
d9.jpg      89
d9.jpg      89
d9.jpg      89
d10.jpg      90
d10.jpg      90
d10.jpg      90
d10.jpg      90
etc.....
</code>```

The results repeat the same attribute four times! I don't understand why this is and I cannot find a reason for this anywhere!

I have 3 tables, table1 PK(image_id) is referenced as the FK in Item. Item PK(Item_id) is referenced with FK in table3. table3 has a compound key from table 4(account_id) and table2(item_id).

My query is clearly wrong, but I don't understand why? I hope someone could provide an explanation to the result!, or help point me in the right direction!

Thanks

答: There might be some columns you are not selecting which will make the row look unique. So, may be your query is working fine, however, since you are not selecting all the columns, they appear as duplicate rows.</p>

Title: MySQL Query returns duplicates

Body:
I am very new to SQL

when I execute the below query it returns the following results:

SELECT table1.image_name, table1.item_id
FROM table1, table2, table3
WHERE table2.catagory="item"
AND table3.account_id=59

image_name    image_id
-------------------------
d9.jpg      89
d9.jpg      89
d9.jpg      89
d9.jpg      89
d10.jpg      90
d10.jpg      90
d10.jpg      90
d10.jpg      90
etc.....

The results repeat the same attribute four times! I don't understand why this is and I cannot find a reason for this anywhere!

I have 3 tables, table1 PK(image_id) is referenced as the FK in Item. Item PK(Item_id) is referenced with FK in table3. table3 has a compound key from table 4(account_id) and table2(item_id).

My query is clearly wrong, but I don't understand why? I hope someone could provide an explanation to the result!, or help point me in the right direction!

Thanks


问:
npm audit EINVALIDTAGNAME
When I execute npm audit in a folder with the project's package.json and package-lock.json I get the following error:

```<code>0 info it worked if it ends with ok
1 verbose cli [ '/home/user/Downloads/node-v10.14.0-linux-x64/bin/node',
1 verbose cli   '/home/user/Downloads/node-v10.14.0-linux-x64/bin/npm',
1 verbose cli   'audit' ]
2 info using npm@6.5.0
3 info using node@v10.14.0
4 verbose npm-session d5b5c65bd8e7ae03
5 verbose stack Error: Invalid tag name "[object Object]": Tags may not have any characters that encodeURIComponent encodes.
5 verbose stack     at invalidTagName (/home/user/Downloads/node-v10.14.0-linux-x64/lib/node_modules/npm/node_modules/npm-package-arg/npa.js:87:15)
5 verbose stack     at fromRegistry (/home/user/Downloads/node-v10.14.0-linux-x64/lib/node_modules/npm/node_modules/npm-package-arg/npa.js:290:13)
5 verbose stack     at Function.resolve (/home/user/Downloads/node-v10.14.0-linux-x64/lib/node_modules/npm/node_modules/npm-package-arg/npa.js:77:12)
5 verbose stack     at Object.keys.forEach.name (/home/user/Downloads/node-v10.14.0-linux-x64/lib/node_modules/npm/node_modules/lock-verify/index.js:26:26)
5 verbose stack     at Array.forEach (<anonymous>)
5 verbose stack     at Promise.all.then.result (/home/user/Downloads/node-v10.14.0-linux-x64/lib/node_modules/npm/node_modules/lock-verify/index.js:25:25)
6 verbose cwd /home/user/projects/test-npm/CRYPTOSTORAGE/repos/crypto-storage/etc/approvalClient
7 verbose Linux 3.10.0-862.14.4.el7.x86_64
8 verbose argv "/home/user/Downloads/node-v10.14.0-linux-x64/bin/node" "/home/user/Downloads/node-v10.14.0-linux-x64/bin/npm" "audit"
9 verbose node v10.14.0
10 verbose npm  v6.5.0
11 error code EINVALIDTAGNAME
12 error Invalid tag name "[object Object]": Tags may not have any characters that encodeURIComponent encodes.
13 verbose exit [ 1, true ]
</code>```

If this would happen to only one project - but actually it does indeed happen to all projects that I've tried (~70). There is an internal registry, but I've both removed the local .npmrc and the one in home. Also the error I was getting then was a different one.

Is this a bug or am I doing something wrong?

答:
Not positive if this is the exact issue the author is hitting, but I ran into this error when I copy/pasted the contents of my package.json into package-lock.json. As I was searching through the JS stack trace, I realized that those files have different object formats and are not interchangeable.

This is likely your issue if npm install works fine, but npm ci and npm audit are failing with the above error.

Title: npm audit EINVALIDTAGNAME

Body:
When I execute npm audit in a folder with the project's package.json and package-lock.json I get the following error:

0 info it worked if it ends with ok
1 verbose cli [ '/home/user/Downloads/node-v10.14.0-linux-x64/bin/node',
1 verbose cli   '/home/user/Downloads/node-v10.14.0-linux-x64/bin/npm',
1 verbose cli   'audit' ]
2 info using npm@6.5.0
3 info using node@v10.14.0
4 verbose npm-session d5b5c65bd8e7ae03
5 verbose stack Error: Invalid tag name "[object Object]": Tags may not have any characters that encodeURIComponent encodes.
5 verbose stack     at invalidTagName (/home/user/Downloads/node-v10.14.0-linux-x64/lib/node_modules/npm/node_modules/npm-package-arg/npa.js:87:15)
5 verbose stack     at fromRegistry (/home/user/Downloads/node-v10.14.0-linux-x64/lib/node_modules/npm/node_modules/npm-package-arg/npa.js:290:13)
5 verbose stack     at Function.resolve (/home/user/Downloads/node-v10.14.0-linux-x64/lib/node_modules/npm/node_modules/npm-package-arg/npa.js:77:12)
5 verbose stack     at Object.keys.forEach.name (/home/user/Downloads/node-v10.14.0-linux-x64/lib/node_modules/npm/node_modules/lock-verify/index.js:26:26)
5 verbose stack     at Array.forEach (<anonymous>)
5 verbose stack     at Promise.all.then.result (/home/user/Downloads/node-v10.14.0-linux-x64/lib/node_modules/npm/node_modules/lock-verify/index.js:25:25)
6 verbose cwd /home/user/projects/test-npm/CRYPTOSTORAGE/repos/crypto-storage/etc/approvalClient
7 verbose Linux 3.10.0-862.14.4.el7.x86_64
8 verbose argv "/home/user/Downloads/node-v10.14.0-linux-x64/bin/node" "/home/user/Downloads/node-v10.14.0-linux-x64/bin/npm" "audit"
9 verbose node v10.14.0
10 verbose npm  v6.5.0
11 error code EINVALIDTAGNAME
12 error Invalid tag name "[object Object]": Tags may not have any characters that encodeURIComponent encodes.
13 verbose exit [ 1, true ]

If this would happen to only one project - but actually it does indeed happen to all projects that I've tried (~70). There is an internal registry, but I've both removed the local .npmrc and the one in home. Also the error I was getting then was a different one.

Is this a bug or am I doing something wrong?


问:
Append Elements to DOM According to Values From JS Array
So the question's kind of weird but here's what I'm trying to accomplish:

I need a function that builds specific URLs, depending on an array inside a data attribute passed to the function, using a switch statement or whatever works best. This is my current syntax, which is probably wrong

const selectUrls = (args) => {
  const element = $("#element");

  for (let arg in args) {
    switch (arg) {
      case "facebook":
        element.append('Facebook');
        break;
      case "twitter":
        element.append('Twitter');
        break;
      default:
        console.log("error");
        break;
    }
  }
}
$(document).ready(function() {
  var services = $("#element").data("services");
  selectUrls(...[services]);
})```
<pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="element" data-services="['facebook','twitter']"></section></code>```

End-result should be:

index.html

```<code><section id="element" data-services="['facebook','twitter']">
    <a href="https://facebook.com">Facebook</a>
    <a href="https://twitter.com">Twitter</a>
</section>

...
</code>```

Obviously, if there's a better way to accomplish this, I'd be very open to trying it out.

Thanks!

答:
You need to parse services after replacing the single quote with double quotes

```<code>var parsed = JSON.parse(services.replace(/'/g, '"'));
</code>```

and use for of instead of for in :

$(document).ready(function() {
  var services = $("#element").data("services");
  // replace the single quote with double quotes and parse it
  var parsed = JSON.parse(services.replace(/'/g, '"'));
  selectGeoUrls(parsed);
})

const selectGeoUrls = (args) => {
  const element = $("#element");

  // for of instead of for in to get the element instead of the index
  for (let arg of args) {
    switch (arg) {
      case "facebook":
        element.append('Facebook');
        break;
      case "twitter":
        element.append('Twitter');
        break;
      default:
        console.log("error");
        break;
    }
  }
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section id="element" data-services="['facebook','twitter']"></section></code>```

Body:
So the question's kind of weird but here's what I'm trying to accomplish:

I need a function that builds specific URLs, depending on an array inside a data attribute passed to the function, using a switch statement or whatever works best. This is my current syntax, which is probably wrong

const selectUrls = (args) => {
  const element = $("#element");

  for (let arg in args) {
    switch (arg) {
      case "facebook":
        element.append('Facebook');
        break;
      case "twitter":
        element.append('Twitter');
        break;
      default:
        console.log("error");
        break;
    }
  }
}
$(document).ready(function() {
  var services = $("#element").data("services");
  selectUrls(...[services]);
})

End-result should be:

index.html

    Facebook
    Twitter

...

Obviously, if there's a better way to accomplish this, I'd be very open to trying it out.

Thanks!

Body:
You need to parse services after replacing the single quote with double quotes

var parsed = JSON.parse(services.replace(/'/g, '"'));

and use for of instead of for in :

$(document).ready(function() {
  var services = $("#element").data("services");
  // replace the single quote with double quotes and parse it
  var parsed = JSON.parse(services.replace(/'/g, '"'));
  selectGeoUrls(parsed);
})

const selectGeoUrls = (args) => {
  const element = $("#element");

  // for of instead of for in to get the element instead of the index
  for (let arg of args) {
    switch (arg) {
      case "facebook":
        element.append('<a href="https://facebook.com">Facebook</a>');
        break;
      case "twitter":
        element.append('<a href="https://twitter.com">Twitter</a>');
        break;
      default:
        console.log("error");
        break;
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section id="element" data-services="['facebook','twitter']"></section>


问:
iPhone: dismiss keyboard when user touches background
I have read some other articles like here and here but unfortunately there are some differences in my code that won't make these work (so please don't suggest these answers).

I would like to dismiss the keyboard when the user taps the background. Normally this would be easy, except that my UITextField objects are inside a UIScrollView which makes it so I can't catch the touch events (the UIScrollView swallows them so they don't reach the base view). One way to get around this is to register for a generic gesture (a tap), but this catches all taps, including the ones intended for the submit button.

So basically, 'touchesBegan:withEvent:' wont work because it never gets called, and gestures wont work because they dont account for button presses.

Here's the question: is there some way to detect a simple tap on a UIScrollView? Once I detect the tap I know how to do the rest. Thanks!

答:
You can't use touchesBegan:withEvent on the superview of the scrollview, but what about subclassing UIScrollView and handling the touch there? You can then proceed normally with a call to super's implementation to keep from stepping on the UIScrollView's toes:

```<code>- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {

    /* Insert code to dismiss keyboard if needed */

    // This makes sure scrolling proceeds normally.
    [super touchesBegain:touches withEvent:event];
}
</code>```

Body:
You can't use touchesBegan:withEvent on the superview of the scrollview, but what about subclassing UIScrollView and handling the touch there? You can then proceed normally with a call to super's implementation to keep from stepping on the UIScrollView's toes:

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {

    /* Insert code to dismiss keyboard if needed */

    // This makes sure scrolling proceeds normally.
    [super touchesBegain:touches withEvent:event];
}


问:
How to configure log4j for a Spark program running inside of Intellij?
I've tried all possible suggestion on google but I still get spark log with INFO level which is too verbose. </p>

```<code>import org.apache.log4j.{Level, LogManager, Logger}
import org.apache.spark.sql.SparkSession

object  tmp {

  def main(args: Array[String]): Unit = {
    val spark =  SparkSession.builder()
      .master("local[*]")
      .getOrCreate()

    spark.sparkContext.setLogLevel("ERROR")

    LogManager.getRootLogger.setLevel(Level.ERROR)
    val rootLogger = Logger.getRootLogger()
    rootLogger.setLevel(Level.ERROR)

    Logger.getLogger("org").setLevel(Level.OFF)
    Logger.getLogger("akka").setLevel(Level.OFF)

    spark.read.json("/home/white/wk/tmp/people.json").show
  }
}
</code>```

答:
An important part of any application is the underlying log system we incorporate into it. Logs are not only for debugging and traceability but also for business intelligence. Building a robust logging system within our apps could be used as a great insight into the business problems we are solving.

Log4j in Apache Spark
Spark uses log4j as the standard library for its own logging. Everything that happens inside Spark gets logged to the shell console and to the configured underlying storage. Spark also provides a template for app writers so we could use the same_log4j_ libraries to add whatever messages we want to the existing and in-place implementation of logging in Spark.

Configuring Log4j
Under the _SPARK_HOME/conf_ folder, there is_log4j.properties.template_ file which serves as a starting point for our own logging system.

Based on this file, we created the log4j.properties file and put it under the same directory.

```<code>log4j.properties looks like follows:

log4j.appender.myConsoleAppender=org.apache.log4j.ConsoleAppender
log4j.appender.myConsoleAppender.layout=org.apache.log4j.PatternLayout
log4j.appender.myConsoleAppender.layout.ConversionPattern=%d [%t] %-5p %c - %m%n

log4j.appender.RollingAppender=org.apache.log4j.DailyRollingFileAppender
log4j.appender.RollingAppender.File=/var/log/spark.log
log4j.appender.RollingAppender.DatePattern='.'yyyy-MM-dd
log4j.appender.RollingAppender.layout=org.apache.log4j.PatternLayout
log4j.appender.RollingAppender.layout.ConversionPattern=[%p] %d %c %M - %m%n

log4j.appender.RollingAppenderU=org.apache.log4j.DailyRollingFileAppender
log4j.appender.RollingAppenderU.File=/var/log/sparkU.log
log4j.appender.RollingAppenderU.DatePattern='.'yyyy-MM-dd
log4j.appender.RollingAppenderU.layout=org.apache.log4j.PatternLayout
log4j.appender.RollingAppenderU.layout.ConversionPattern=[%p] %d %c %M - %m%n
</code>```

By default, everything goes to console and file

```<code>log4j.rootLogger=INFO, RollingAppender, myConsoleAppender
</code>```

My custom logging goes to another file

```<code>log4j.logger.myLogger=INFO, RollingAppenderU
</code>```

The noisier spark logs go to file only

```<code>log4j.logger.spark.storage=INFO, RollingAppender
log4j.additivity.spark.storage=false
log4j.logger.spark.scheduler=INFO, RollingAppender
log4j.additivity.spark.scheduler=false
log4j.logger.spark.CacheTracker=INFO, RollingAppender
log4j.additivity.spark.CacheTracker=false
log4j.logger.spark.CacheTrackerActor=INFO, RollingAppender
log4j.additivity.spark.CacheTrackerActor=false
log4j.logger.spark.MapOutputTrackerActor=INFO, RollingAppender
log4j.additivity.spark.MapOutputTrackerActor=false
log4j.logger.spark.MapOutputTracker=INFO, RollingAppender
log4j.additivty.spark.MapOutputTracker=false
</code>```

Basically, we want to hide all logs Spark generates so we don’t have to deal with them in the shell. We redirect them to be logged in the file system. On the other hand, we want our own logs to be logged in the shell and a separate file so they don’t get mixed up with the ones from Spark. From here, we will point Splunk to the files where our own logs are which in this particular case is_/var/log/sparkU.log._

This (log4j.properties) file is picked up by Spark when the application starts so we don’t have to do anything aside of placing it in the mentioned location.

Writing Our Own Logs
Now that we have configured the components that Spark requires in order to manage our logs, we just need to start writing logs within our apps.

In order to show how this is done, let’s write a small app that helps us in the demonstration.

Our App:

```<code>object app {
def main(args: Array[String]) {
val log = LogManager.getRootLogger
log.setLevel(Level.WARN)

val conf = new SparkConf().setAppName("demo-app")
val sc = new SparkContext(conf)

log.warn("Hello demo")

val data = sc.parallelize(1 to 100000)

log.warn("I am done")
}
}
</code>```

Running this Spark app will demonstrate that our log system works. We will be able to see how _Hello demo _and I am done messages being logged in the shell and in the file system while the Spark logs will only go to the file system.

So far, everything seems easy, yet there is a problem we haven’t mentioned.

The class org.apache.log4j.Logger is not serializable which implies we cannot use it inside a closure while doing operations on some parts of the Spark API.

For example, if we do in our app:

```<code>val log = LogManager.getRootLogger
val data = sc.parallelize(1 to 100000)

data.map { value =>
log.info(value)
value.toString
}
</code>```

This will fail when running on Spark. Spark complaints that the_log_ object is not Serializable so it cannot be sent over the network to the Spark workers.

This problem is actually easy to solve. Let’s create a class that does something to our data set while doing a lot of logging.

```<code>class Mapper(n: Int) extends Serializable{
@transient lazy val log = org.apache.log4j.LogManager.getLogger("myLogger")

def doSomeMappingOnDataSetAndLogIt(rdd: RDD[Int]): RDD[String] =
rdd.map{ i =>
log.warn("mapping: " + i)
(i + n).toString
}
}
</code>```

The mapper receives an _RDD[Int] _and returns an RDD[String] and it also logs what value it's being mapped. In this case, noted how the_log_ object has been marked as @transient which allows the serialization system to ignore the log object. Now, Mapper is being serialized and sent to each worker but the log object is being resolved when it is needed in the worker, solving our problem.

Another solution is to wrap the log object into an _object_construct and use it all over the place. We rather have a log within the class we are going to use it, but the alternative is also valid.

At this point, our entire app looks like follows:

```<code>import org.apache.log4j.{Level, LogManager, PropertyConfigurator}
import org.apache.spark._
import org.apache.spark.rdd.RDD

class Mapper(n: Int) extends Serializable{
@transient lazy val log = org.apache.log4j.LogManager.getLogger("myLogger")
def doSomeMappingOnDataSetAndLogIt(rdd: RDD[Int]): RDD[String] =
rdd.map{ i =>
log.warn("mapping: " + i)
(i + n).toString
}
}
object Mapper {
def apply(n: Int): Mapper = new Mapper(n)
}
object app {
def main(args: Array[String]) {
val log = LogManager.getRootLogger
log.setLevel(Level.WARN)
val conf = new SparkConf().setAppName("demo-app")
val sc = new SparkContext(conf)

log.warn("Hello demo")

val data = sc.parallelize(1 to 100000)
val mapper = Mapper(1)
val other = mapper.doSomeMappingOnDataSetAndLogIt(data)
other.collect()

log.warn("I am done")
}
}
</code>```

Conclusions
Our logs are now being shown in the shell and also stored in their own files. Spark logs are being hidden from the shell and is logged into their own file. We also solved the serialization problem that appears when trying to log in to different workers.

We now can build more robust BI systems based on our own Spark logs as we do with other non distributed systems and applications we have today. Business Intelligence is for us a very big deal and having the right insights is always nice to have.

Body:
I've tried all possible suggestion on google but I still get spark log with INFO level which is too verbose.

import org.apache.log4j.{Level, LogManager, Logger}
import org.apache.spark.sql.SparkSession

object  tmp {

  def main(args: Array[String]): Unit = {
    val spark =  SparkSession.builder()
      .master("local[*]")
      .getOrCreate()

    spark.sparkContext.setLogLevel("ERROR")

    LogManager.getRootLogger.setLevel(Level.ERROR)
    val rootLogger = Logger.getRootLogger()
    rootLogger.setLevel(Level.ERROR)

    Logger.getLogger("org").setLevel(Level.OFF)
    Logger.getLogger("akka").setLevel(Level.OFF)

    spark.read.json("/home/white/wk/tmp/people.json").show
  }
}

Body:
An important part of any application is the underlying log system we incorporate into it. Logs are not only for debugging and traceability but also for business intelligence. Building a robust logging system within our apps could be used as a great insight into the business problems we are solving.

Log4j in Apache Spark
Spark uses log4j as the standard library for its own logging. Everything that happens inside Spark gets logged to the shell console and to the configured underlying storage. Spark also provides a template for app writers so we could use the same_log4j_ libraries to add whatever messages we want to the existing and in-place implementation of logging in Spark.

Configuring Log4j
Under the _SPARK_HOME/conf_ folder, there is_log4j.properties.template_ file which serves as a starting point for our own logging system.

Based on this file, we created the log4j.properties file and put it under the same directory.

log4j.properties looks like follows:

log4j.appender.myConsoleAppender=org.apache.log4j.ConsoleAppender
log4j.appender.myConsoleAppender.layout=org.apache.log4j.PatternLayout
log4j.appender.myConsoleAppender.layout.ConversionPattern=%d [%t] %-5p %c - %m%n

log4j.appender.RollingAppender=org.apache.log4j.DailyRollingFileAppender
log4j.appender.RollingAppender.File=/var/log/spark.log
log4j.appender.RollingAppender.DatePattern='.'yyyy-MM-dd
log4j.appender.RollingAppender.layout=org.apache.log4j.PatternLayout
log4j.appender.RollingAppender.layout.ConversionPattern=[%p] %d %c %M - %m%n

log4j.appender.RollingAppenderU=org.apache.log4j.DailyRollingFileAppender
log4j.appender.RollingAppenderU.File=/var/log/sparkU.log
log4j.appender.RollingAppenderU.DatePattern='.'yyyy-MM-dd
log4j.appender.RollingAppenderU.layout=org.apache.log4j.PatternLayout
log4j.appender.RollingAppenderU.layout.ConversionPattern=[%p] %d %c %M - %m%n

By default, everything goes to console and file

log4j.rootLogger=INFO, RollingAppender, myConsoleAppender

My custom logging goes to another file

log4j.logger.myLogger=INFO, RollingAppenderU

The noisier spark logs go to file only

log4j.logger.spark.storage=INFO, RollingAppender
log4j.additivity.spark.storage=false
log4j.logger.spark.scheduler=INFO, RollingAppender
log4j.additivity.spark.scheduler=false
log4j.logger.spark.CacheTracker=INFO, RollingAppender
log4j.additivity.spark.CacheTracker=false
log4j.logger.spark.CacheTrackerActor=INFO, RollingAppender
log4j.additivity.spark.CacheTrackerActor=false
log4j.logger.spark.MapOutputTrackerActor=INFO, RollingAppender
log4j.additivity.spark.MapOutputTrackerActor=false
log4j.logger.spark.MapOutputTracker=INFO, RollingAppender
log4j.additivty.spark.MapOutputTracker=false

Basically, we want to hide all logs Spark generates so we don’t have to deal with them in the shell. We redirect them to be logged in the file system. On the other hand, we want our own logs to be logged in the shell and a separate file so they don’t get mixed up with the ones from Spark. From here, we will point Splunk to the files where our own logs are which in this particular case is_/var/log/sparkU.log._

This (log4j.properties) file is picked up by Spark when the application starts so we don’t have to do anything aside of placing it in the mentioned location.

Writing Our Own Logs
Now that we have configured the components that Spark requires in order to manage our logs, we just need to start writing logs within our apps.

In order to show how this is done, let’s write a small app that helps us in the demonstration.

Our App:

object app {
def main(args: Array[String]) {
val log = LogManager.getRootLogger
log.setLevel(Level.WARN)

val conf = new SparkConf().setAppName("demo-app")
val sc = new SparkContext(conf)

log.warn("Hello demo")

val data = sc.parallelize(1 to 100000)

log.warn("I am done")
}
}

Running this Spark app will demonstrate that our log system works. We will be able to see how _Hello demo _and I am done messages being logged in the shell and in the file system while the Spark logs will only go to the file system.

So far, everything seems easy, yet there is a problem we haven’t mentioned.

The class org.apache.log4j.Logger is not serializable which implies we cannot use it inside a closure while doing operations on some parts of the Spark API.

For example, if we do in our app:

val log = LogManager.getRootLogger
val data = sc.parallelize(1 to 100000)

data.map { value =>
log.info(value)
value.toString
}

This will fail when running on Spark. Spark complaints that the_log_ object is not Serializable so it cannot be sent over the network to the Spark workers.

This problem is actually easy to solve. Let’s create a class that does something to our data set while doing a lot of logging.

class Mapper(n: Int) extends Serializable{
@transient lazy val log = org.apache.log4j.LogManager.getLogger("myLogger")

def doSomeMappingOnDataSetAndLogIt(rdd: RDD[Int]): RDD[String] =
rdd.map{ i =>
log.warn("mapping: " + i)
(i + n).toString
}
}

The mapper receives an _RDD[Int] _and returns an RDD[String] and it also logs what value it's being mapped. In this case, noted how the_log_ object has been marked as @transient which allows the serialization system to ignore the log object. Now, Mapper is being serialized and sent to each worker but the log object is being resolved when it is needed in the worker, solving our problem.

Another solution is to wrap the log object into an _object_construct and use it all over the place. We rather have a log within the class we are going to use it, but the alternative is also valid.

At this point, our entire app looks like follows:

import org.apache.log4j.{Level, LogManager, PropertyConfigurator}
import org.apache.spark._
import org.apache.spark.rdd.RDD

class Mapper(n: Int) extends Serializable{
@transient lazy val log = org.apache.log4j.LogManager.getLogger("myLogger")
def doSomeMappingOnDataSetAndLogIt(rdd: RDD[Int]): RDD[String] =
rdd.map{ i =>
log.warn("mapping: " + i)
(i + n).toString
}
}
object Mapper {
def apply(n: Int): Mapper = new Mapper(n)
}
object app {
def main(args: Array[String]) {
val log = LogManager.getRootLogger
log.setLevel(Level.WARN)
val conf = new SparkConf().setAppName("demo-app")
val sc = new SparkContext(conf)

log.warn("Hello demo")

val data = sc.parallelize(1 to 100000)
val mapper = Mapper(1)
val other = mapper.doSomeMappingOnDataSetAndLogIt(data)
other.collect()

log.warn("I am done")
}
}

Conclusions
Our logs are now being shown in the shell and also stored in their own files. Spark logs are being hidden from the shell and is logged into their own file. We also solved the serialization problem that appears when trying to log in to different workers.

We now can build more robust BI systems based on our own Spark logs as we do with other non distributed systems and applications we have today. Business Intelligence is for us a very big deal and having the right insights is always nice to have.


问:
tidy - How to remove duplicate ID's from HTML
I have a HTML that need to be parsed by DOMDocument::loadHtml($html), but it gives me an error:

DOMDocument::loadHTML(): ID 'my id' already defined in Entity

I don't have control about the $html, but I can use tidy lib (or something else, ideas?) on it and make a parseable HTML.
But I'm not finding a option in tidy's config to remove duplicate ID's in tidy config. My code is like that:

```<code>$tidy = new tidy();
$tidy->parseString($this->getPageContents());
$html = new DOMDocument();
$html->loadHTML($tidy); // error here
</code>```

Thx

答:
try

```<code>$html->loadXML($tidy);
</code>```

and than rewriting the id's using xml dom before parsing as html dom

Body:
I have a HTML that need to be parsed by DOMDocument::loadHtml($html), but it gives me an error:

DOMDocument::loadHTML(): ID 'my id' already defined in Entity

I don't have control about the $html, but I can use tidy lib (or something else, ideas?) on it and make a parseable HTML.
But I'm not finding a option in tidy's config to remove duplicate ID's in tidy config. My code is like that:

$tidy = new tidy();
$tidy->parseString($this->getPageContents());
$html = new DOMDocument();
$html->loadHTML($tidy); // error here

Thx

Body:
try

$html->loadXML($tidy);

and than rewriting the id's using xml dom before parsing as html dom


问:
loop over table to set the background css
My HTML table has some classes and table tag is used

Want to retain the classes as is, but all my table and tr , th or td are using td bgcolor which is an old technique.

I want to loop over the table and find if that bgcolor is defined, use the same color and convert it to a css based background color so i can print it in IE

```<code>function setBackground() {

var table = document.getElementById("table1");

//i found this in a previous stack overflow answer and tried it

for (var i = 0, row; row = table.rows[i]; i++) {

   for (var j = 0, col; col = row.cells[j]; j++) {

  //this is for debugging purposes... I can't even get this to work
   alert(table.rows[i].cells[j]);

   table.rows[i].cells[j].style.background = "orange"; //just an example

    }
 }
}
</code>```

because IE is not able to print the background lines and colors for some reason using the webkit property

答:
Get the color if found and then do with it whatever needed...

function setBackgroundColor(colorValue) {
  const table = document.getElementById("table1");
  const rows = table.children[0].rows

  for (let i = 0; i < rows.length; i++) {
    const tds = rows[i].children;
    for (let j = 0; j < tds.length; j++) {
      if (tds[j].bgColor === colorValue) {
        console.log('Color found, do action')

      }
    }
  }
}

setBackgroundColor('red')```
<pre class="snippet-code-html lang-html prettyprint-override"><code><table id="table1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td bgcolor="red">January</td>
    <td bgcolor="green">$100</td>
  </tr>
</table></code>```

Body:
My HTML table has some classes and table tag is used

Want to retain the classes as is, but all my table and tr , th or td are using td bgcolor which is an old technique.

I want to loop over the table and find if that bgcolor is defined, use the same color and convert it to a css based background color so i can print it in IE

function setBackground() {

var table = document.getElementById("table1");

//i found this in a previous stack overflow answer and tried it

for (var i = 0, row; row = table.rows[i]; i++) {

   for (var j = 0, col; col = row.cells[j]; j++) {

  //this is for debugging purposes... I can't even get this to work
   alert(table.rows[i].cells[j]);

   table.rows[i].cells[j].style.background = "orange"; //just an example

    }
 }
}

because IE is not able to print the background lines and colors for some reason using the webkit property

Body:
Get the color if found and then do with it whatever needed...

function setBackgroundColor(colorValue) {
  const table = document.getElementById("table1");
  const rows = table.children[0].rows

  for (let i = 0; i < rows.length; i++) {
    const tds = rows[i].children;
    for (let j = 0; j < tds.length; j++) {
      if (tds[j].bgColor === colorValue) {
        console.log('Color found, do action')

      }
    }
  }
}

setBackgroundColor('red')

<table id="table1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td bgcolor="red">January</td>
    <td bgcolor="green">$100</td>
  </tr>
</table>


问:
How to calculate last day of month per row in dremio?
I have a properly casted date column that I want to create a new column from that is that date of the last day of the month.

Example:

```<code>current_datefield         end_of_month_date
2019-03-01                 2019-03-31
2020-01-29                 2020-01-31
</code>```

I dont know how to do this in dremio, I have tried EXTRACT,Date_PART

Non of the solutions work. Thank you in advance.

答:
If you are SQL Server, there is a function called EOMONTH.
Using the EOMONTH function, you can write a query for your requirement.
Check out this youtube video providing solution to your requirement:
https://youtu.be/QsQDHux1C4A</p>

Body:
I have a properly casted date column that I want to create a new column from that is that date of the last day of the month.

Example:

current_datefield         end_of_month_date
2019-03-01                 2019-03-31
2020-01-29                 2020-01-31

I dont know how to do this in dremio, I have tried EXTRACT,Date_PART

Non of the solutions work. Thank you in advance.